<!DOCTYPE html>
<html lang="en" ng-app="ui.bootstrap.demo" id="top"><style type="text/css" id="3417949835"></style><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="icon" href="assets/favicon.ico">
    <title>Angular directives for Bootstrap</title>
    <meta name="description" content="AngularJS (Angular) native directives for Bootstrap. Small footprint (5kB gzipped!), no 3rd party JS dependencies (jQuery, bootstrap JS) required! Widgets: Accordion, Alert, Buttons, Carousel, Collapse, Dateparser, Datepicker, Dropdown, Modal, Pager, Pagination, Popover, Position, Progressbar, Rating, Tabs, Timepicker, Tooltip, Typeahead, ">
    <meta name="google-site-verification" content="7lc5HyceLDqpV_6oNHteYFfxDJH7-S3DwnJKtNUKcRg">
    <script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script><script type="text/javascript" async="" src="https://apis.google.com/js/plusone.js"></script><script id="twitter-wjs" src="//platform.twitter.com/widgets.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/0.6.7/fastclick.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.0.0/FileSaver.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular-animate.min.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular-touch.min.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular-sanitize.min.js"></script>
    <script src="ui-bootstrap-tpls-1.2.5.min.js"></script>
    <script src="assets/plunker.js"></script>
    <script src="assets/app.js"></script>

    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/rainbow.css">
    <link rel="stylesheet" href="assets/demo.css">
    <link rel="author" href="https://github.com/angular-ui/bootstrap/graphs/contributors">
</head>
<body class="ng-cloak" ng-controller="MainCtrl" mycollectionplug="bind">
<header class="navbar navbar-default navbar-fixed-top navbar-inner">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3" ng-click="isCollapsed = !isCollapsed">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand visible-xs" href="#">UI Bootstrap</a>
        </div>
        <nav class="hidden-xs">
            <ul class="nav navbar-nav">
                <a href="#top" role="button" class="navbar-brand">
                    UI Bootstrap
                </a>
                <li class="dropdown" uib-dropdown="">
                    <a role="button" class="dropdown-toggle" uib-dropdown-toggle="">
                        Directives <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#accordion">Accordion</a></li><li><a href="#alert">Alert</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#carousel">Carousel</a></li><li><a href="#collapse">Collapse</a></li><li><a href="#dateparser">Dateparser</a></li><li><a href="#datepicker">Datepicker</a></li><li><a href="#dropdown">Dropdown</a></li><li><a href="#modal">Modal</a></li><li><a href="#pager">Pager</a></li><li><a href="#pagination">Pagination</a></li><li><a href="#popover">Popover</a></li><li><a href="#position">Position</a></li><li><a href="#progressbar">Progressbar</a></li><li><a href="#rating">Rating</a></li><li><a href="#tabs">Tabs</a></li><li><a href="#timepicker">Timepicker</a></li><li><a href="#tooltip">Tooltip</a></li><li><a href="#typeahead">Typeahead</a></li>
                    </ul>
                </li>
                <li><a href="#getting_started">Getting started</a></li>
                <li class="dropdown" uib-dropdown="">
                    <a role="button" class="dropdown-toggle" uib-dropdown-toggle="">
                        Previous docs <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li ng-repeat="version in oldDocs">
                            <a ng-href="{{version.url}}">{{version.version}}</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
        <nav class="visible-xs" uib-collapse="!isCollapsed">
            <ul class="nav navbar-nav">
                <li><a href="#getting_started" ng-click="isCollapsed = !isCollapsed">Getting started</a></li>
                <li><a href="#directives_small" ng-click="isCollapsed = !isCollapsed">Directives</a></li>
            </ul>
        </nav>
    </div>
</header>
<div class="header-placeholder"></div>
<div role="main">
    <header class="bs-header text-center" id="overview">
        <div class="container">
            <h1>
                UI Bootstrap
            </h1>

            <p>Bootstrap components written in pure <a href="http://angularjs.org">AngularJS</a> by the <a href="http://angular-ui.github.io">AngularUI Team</a></p>

            <p>
                <a class="btn btn-outline-inverse btn-lg" href="https://github.com/angular-ui/bootstrap"><i class="icon-github"></i>Code on Github</a>
                <button type="button" class="btn btn-outline-inverse btn-lg" ng-click="showDownloadModal()">
                    <i class="glyphicon glyphicon-download-alt"></i> Download <small>(1.2.5)</small>
                </button>
                <button type="button" class="btn btn-outline-inverse btn-lg" ng-click="showBuildModal()"><i class="glyphicon glyphicon-wrench"></i> Create a Build</button>
            </p>
        </div>
        <div class="bs-social container">
            <ul class="bs-social-buttons">
                <li>
                    <iframe src="//ghbtns.com/github-btn.html?user=angular-ui&amp;repo=bootstrap&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
                </li>
                <li>
                    <iframe src="//ghbtns.com/github-btn.html?user=angular-ui&amp;repo=bootstrap&amp;type=fork&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
                </li>
                <li>
                    <a href="https://twitter.com/share" class="twitter-share-button" data-hashtags="angularjs">Tweet</a>
                    <script>!function (d, s, id) {
                        var js, fjs = d.getElementsByTagName(s)[0];
                        if (!d.getElementById(id)) {
                            js = d.createElement(s);
                            js.id = id;
                            js.src = "//platform.twitter.com/widgets.js";
                            fjs.parentNode.insertBefore(js, fjs);
                        }
                    }(document, "script", "twitter-wjs");</script>
                </li>
                <li>
                    <!-- Place this tag where you want the +1 button to render. -->
                    <div class="g-plusone" data-size="medium"></div>

                    <!-- Place this tag after the last +1 button tag. -->
                    <script type="text/javascript">
                        (function () {
                            var po = document.createElement('script');
                            po.type = 'text/javascript';
                            po.async = true;
                            po.src = 'https://apis.google.com/js/plusone.js';
                            var s = document.getElementsByTagName('script')[0];
                            s.parentNode.insertBefore(po, s);
                        })();
                    </script>
                </li>
            </ul>
        </div>
    </header>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <section class="bs-sidebar visible-xs" id="directives_small">
                    <ul class="nav bs-sidenav">
                        <li><a href="#"><strong>Directives</strong></a></li>
                        
                            <li><a href="#accordion">Accordion</a></li>
                        
                            <li><a href="#alert">Alert</a></li>
                        
                            <li><a href="#buttons">Buttons</a></li>
                        
                            <li><a href="#carousel">Carousel</a></li>
                        
                            <li><a href="#collapse">Collapse</a></li>
                        
                            <li><a href="#dateparser">Dateparser</a></li>
                        
                            <li><a href="#datepicker">Datepicker</a></li>
                        
                            <li><a href="#dropdown">Dropdown</a></li>
                        
                            <li><a href="#modal">Modal</a></li>
                        
                            <li><a href="#pager">Pager</a></li>
                        
                            <li><a href="#pagination">Pagination</a></li>
                        
                            <li><a href="#popover">Popover</a></li>
                        
                            <li><a href="#position">Position</a></li>
                        
                            <li><a href="#progressbar">Progressbar</a></li>
                        
                            <li><a href="#rating">Rating</a></li>
                        
                            <li><a href="#tabs">Tabs</a></li>
                        
                            <li><a href="#timepicker">Timepicker</a></li>
                        
                            <li><a href="#tooltip">Tooltip</a></li>
                        
                            <li><a href="#typeahead">Typeahead</a></li>
                        
                    </ul>
                </section>

                <section id="getting_started">
                    <div class="page-header">
                        <h1>Getting started</h1>
                    </div>
                    <h3>Dependencies</h3>
                    <p>
                        This repository contains a set of <strong>native AngularJS directives</strong> based on
                        Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's
                        JavaScript is required. The <strong>only required dependencies</strong> are:
                    </p>
                    <ul>
                        <li><a href="http://angularjs.org" target="_blank">AngularJS</a> (requires AngularJS 1.4.x or higher, tested with 1.5.0).
                            0.14.3 is the last version of this library that supports AngularJS 1.3.x and
                            0.12.0 is the last version that supports AngularJS 1.2.x.</li>
                        <li><a href="http://angularjs.org" target="_blank">Angular-animate</a> (the version should match with your angular's, tested with 1.5.0) if you plan in using animations, you need to load angular-animate as well.</li>
                        <li><a href="http://angularjs.org" target="_blank">Angular-touch</a> (the version should match with your angular's, tested with 1.5.0) if you plan in using swipe actions, you need to load angular-touch as well.</li>
                        <li><a href="http://getbootstrap.com" target="_blank">Bootstrap CSS</a> (tested with version 3.3.6).
                            This version of the library (1.2.5) works only with Bootstrap CSS in version 3.x.
                            0.8.0 is the last version of this library that supports Bootstrap CSS in version 2.3.x.
                        </li>
                    </ul>
                    <h3>Files to download</h3>
                    <p>
                        Build files for all directives are distributed in several flavours: minified for production usage, un-minified
                        for development, with or without templates. All the options are described and can be
                        <a href="https://github.com/angular-ui/bootstrap/tree/gh-pages">downloaded from here</a>. It should be noted that the <code>-tpls</code> files contain the templates bundled in JavaScript, while the regular version does not contain the bundled templates. For more information, check out the FAQ <a href="https://github.com/angular-ui/bootstrap/wiki/FAQ#full-explanation">here</a> and the README <a href="https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files">here</a>.
                    </p>
                    <p>Alternativelly, if you are only interested in a subset of directives, you can
                        <a ng-click="showBuildModal()">create your own build</a>.
                    </p>
                    <p>Whichever method you choose the good news that the overall size of a download is very small:
                       &lt;76kB for all directives (~20kB with gzip compression!)</p>
                    <h3>Installation</h3>
                    <p>As soon as you've got all the files downloaded and included in your page you just need to declare
                       a dependency on the <code>ui.bootstrap</code> <a href="http://docs.angularjs.org/guide/module">module</a>:<br>
                       </p><pre><code>angular.module('myModule', ['ui.bootstrap']);</code></pre>
                    <p></p>
                    <p>If you are using UI Bootstrap in the CSP mode, e.g. in an extension, make sure you link to the <code>ui-bootstrap-csp.css</code> in your HTML manually.</p>
                    <p>You can fork one of the plunkers from this page to see a working example of what is described here.</p>
                    <h3>Migration to prefixes</h3>
                    <p>Since version 0.14.0 we started to prefix all our components. If you are upgrading from ui-bootstrap 0.13.4 or earlier,
                    check our <a href="https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes">migration guide</a>.</p>
                    <h3>CSS</h3>
                    <p>Original Bootstrap's CSS depends on empty <code>href</code> attributes to style cursors for several components (pagination, tabs etc.).
                    But in AngularJS adding empty <code>href</code> attributes to link tags will cause unwanted route changes. This is why we need to remove empty <code>href</code> attributes from directive templates and as a result styling is not applied correctly. The remedy is simple, just add the following styling to your application: </p><pre><code>.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }</code></pre>
                    <p></p>
                    <h3>FAQ</h3>
                    <p>Please check <a href="https://github.com/angular-ui/bootstrap/wiki/FAQ" target="_blank">our FAQ section</a> for common problems / solutions.</p>
                    <h3>Reading the documentation</h3>
                    <p>
                        Each of the components provided in <code>ui-bootstrap</code> have documentation and interactive Plunker examples.
                    </p>
                    <p>
                        For the directives, we list the different attributes with their default values. In addition to this, some settings have a badge on it:

                        </p><ul>
                            <li><i class="glyphicon glyphicon-eye-open"></i> - This setting has an angular $watch listener applied to it.</li>
                            <li><small class="badge">B</small> - This setting is a boolean. It doesn't need a parameter.</li>
                            <li><small class="badge">C</small> - This setting can be configured globally in a constant service*.</li>
                            <li><small class="badge">$</small> - This setting expects an angular expression instead of a literal string. If the expression support a boolean / integer, you can pass it directly.</li>
                            <li><small class="badge">readonly</small> - This setting is readonly.</li>
                        </ul>
                    <p></p>
                    <p>
                        For the services (you will recognize them with the <code>$</code> prefix), we list all the possible parameters you can pass to them and their default values if any.
                    </p>
                    <p>
                        * Some directives have a config service that follows the next pattern: <code>uibDirectiveConfig</code>. The service's settings use camel case. The services can be configured in a <code>.config</code> function for example.
                    </p>
                </section>
                
                    <section id="accordion">
                        <div class="page-header">
                          <h1>Accordion<small>
                              (<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/accordion">ui.bootstrap.accordion</a>)
                          </small></h1>
                          </div>
                          <div class="row">
                            <div class="col-md-6 show-grid">
                                <div ng-controller="AccordionDemoCtrl">
  <script type="text/ng-template" id="group-template.html">
    <div class="panel {{panelClass || 'panel-default'}}">
      <div class="panel-heading">
        <h4 class="panel-title" style="color:#fa39c3">
          <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"><span
            ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
        </h4>
      </div>
      <div class="panel-collapse collapse" uib-collapse="!isOpen">
        <div class="panel-body" style="text-align: right" ng-transclude></div>
      </div>
    </div>
  </script>

  <p>
    <button type="button" class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button>
    <button type="button" class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button>
  </p>

  <div class="checkbox">
    <label>
      <input type="checkbox" ng-model="oneAtATime">
      Open only one at a time
    </label>
  </div>
  <uib-accordion close-others="oneAtATime">
    <uib-accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
      This content is straight in the template.
    </uib-accordion-group>
    <uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups">
      {{group.content}}
    </uib-accordion-group>
    <uib-accordion-group heading="Dynamic Body Content">
      <p>The body of the uib-accordion group grows to fit the contents</p>
      <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
      <div ng-repeat="item in items">{{item}}</div>
    </uib-accordion-group>
    <uib-accordion-group heading="Custom template" template-url="group-template.html">
      Hello
    </uib-accordion-group>
    <uib-accordion-group heading="Delete account" panel-class="panel-danger">
      <p>Please, to delete your account, click the button below</p>
      <button class="btn btn-danger">Delete</button>
    </uib-accordion-group>
    <uib-accordion-group is-open="status.open">
      <uib-accordion-heading>
        I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
      </uib-accordion-heading>
      This is just some content to illustrate fancy headings.
    </uib-accordion-group>
  </uib-accordion>
</div>

                            </div>
                            <div class="col-md-6">
                                <p>The <strong>accordion directive</strong> builds on top of the collapse directive to provide a list of items, with collapsible bodies that are collapsed or expanded by clicking on the item's header.</p>
<p>The body of each accordion group is transcluded into the body of the collapsible element.</p>
<h3 id="uib-accordion-settings">uib-accordion settings</h3>
<ul>
<li><p><code>close-others</code>
<small class="badge">$</small>
<small class="badge">C</small>
<em>(Default: <code>true</code>)</em> -
Control whether expanding an item will cause the other items to close.</p>
</li>
<li><p><code>template-url</code>
<em>(Default: <code>template/accordion/accordion.html</code>)</em> -
Add the ability to override the template used on the component.</p>
</li>
</ul>
<h3 id="uib-accordion-group-settings">uib-accordion-group settings</h3>
<ul>
<li><p><code>heading</code>
<em>(Default: <code>none</code>)</em> -
The clickable text on the group's header. You need one to be able to click on the header for toggling.</p>
</li>
<li><p><code>is-disabled</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>false</code>)</em> -
 Whether the accordion group is disabled or not.</p>
</li>
<li><p><code>is-open</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>false</code>)</em> -
Whether accordion group is open or closed.</p>
</li>
<li><p><code>panel-class</code>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>panel-default</code>)</em> -
Add ability to use Bootstrap's contextual panel classes (panel-primary, panel-success, panel-info, etc...) or your own.  This must be a string.</p>
</li>
<li><p><code>template-url</code>
<em>(Default: <code>uib/template/accordion/accordion-group.html</code>)</em> -
Add the ability to override the template used on the component.</p>
</li>
</ul>
<h3 id="accordion-heading">Accordion heading</h3>
<p>Instead of the <code>heading</code> attribute on the <code>uib-accordion-group</code>, you can use an <code>uib-accordion-heading</code> element inside a group that will be used as the group's header.</p>
<p>If you're using a custom template for the <code>uib-accordion-group</code>, you'll need to have an element for the heading to be transcluded into using <code>uib-accordion-header</code> (e.g. <code>&lt;div uib-accordion-header&gt;&lt;/div&gt;</code>).</p>
<h3 id="known-issues">Known issues</h3>
<p>To use clickable elements within the accordion, you have override the accordion-group template to use div elements instead of anchor elements, and add <code>cursor: pointer</code> in your CSS. This is due to browsers interpreting anchor elements as the target of any click event, which triggers routing when certain elements such as buttons are nested inside the anchor element.</p>
<p>If custom classes on the accordion-group element are desired, one needs to either modify the template to remove the <code>ng-class</code> usage in the accordion-group template and use ng-class on the accordion-group element (not recommended), or use an interpolated expression in the class attribute, i.e. <code>&lt;uib-accordion-group class="{{customClass()}}"&gt;&lt;/uib-accordion-group&gt;</code>.</p>

                            </div>
                        </div>
                        <hr>
                        <div class="row code">
                            <div class="col-md-12" ng-controller="PlunkerCtrl">
                                <div class="pull-right">
                                    <button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.5.0', '3.3.6', '1.2.5', 'accordion')"><i class="glyphicon glyphicon-edit"></i> Edit in plunker</button>
                                </div>
                                <uib-tabset active="activeTab">
                                    <uib-tab index="0" heading="Markup">
                                        <div plunker-content="markup">
                                            <pre ng-non-bindable=""><code data-language="html" class="rainbow"><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">ng-controller</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">AccordionDemoCtrl</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
  <span class="source js embedded"><span class="support tag script">&lt;</span><span class="entity tag script">script</span> <span class="entity tag script">type</span>=<span class="string">"text/ng-template"</span> <span class="entity tag script">id</span>=<span class="string">"group-template.html"</span><span class="support tag script">&gt;</span>
    <span class="keyword operator">&lt;</span>div <span class="keyword">class</span><span class="keyword operator">=</span><span class="string">"panel {{panelClass || 'panel-default'}}"</span><span class="keyword operator">&gt;</span>
      <span class="keyword operator">&lt;</span>div <span class="keyword">class</span><span class="keyword operator">=</span><span class="string">"panel-heading"</span><span class="keyword operator">&gt;</span>
        <span class="keyword operator">&lt;</span>h4 <span class="keyword">class</span><span class="keyword operator">=</span><span class="string">"panel-title"</span> style<span class="keyword operator">=</span><span class="string">"color:#fa39c3"</span><span class="keyword operator">&gt;</span>
          <span class="keyword operator">&lt;</span>a href tabindex<span class="keyword operator">=</span><span class="string">"0"</span> <span class="keyword">class</span><span class="keyword operator">=</span><span class="string">"accordion-toggle"</span> ng<span class="keyword operator">-</span>click<span class="keyword operator">=</span><span class="string">"toggleOpen()"</span> uib<span class="keyword operator">-</span>accordion<span class="keyword operator">-</span>transclude<span class="keyword operator">=</span><span class="string">"heading"</span><span class="keyword operator">&gt;</span><span class="keyword operator">&lt;</span>span
            ng<span class="keyword operator">-</span><span class="keyword">class</span><span class="keyword operator">=</span><span class="string">"{'text-muted': isDisabled}"</span><span class="keyword operator">&gt;</span>{{heading}}<span class="keyword operator">&lt;</span><span class="string regexp"><span class="string regexp open">/</span>span&gt;&lt;<span class="string regexp cclose">/</span></span>a<span class="keyword operator">&gt;</span>
        <span class="keyword operator">&lt;</span>/h4<span class="keyword operator">&gt;</span>
      <span class="keyword operator">&lt;</span>/div<span class="keyword operator">&gt;</span>
      <span class="keyword operator">&lt;</span>div <span class="keyword">class</span><span class="keyword operator">=</span><span class="string">"panel-collapse collapse"</span> uib<span class="keyword operator">-</span>collapse<span class="keyword operator">=</span><span class="string">"!isOpen"</span><span class="keyword operator">&gt;</span>
        <span class="keyword operator">&lt;</span>div <span class="keyword">class</span><span class="keyword operator">=</span><span class="string">"panel-body"</span> style<span class="keyword operator">=</span><span class="string">"text-align: right"</span> ng<span class="keyword operator">-</span>transclude<span class="keyword operator">&gt;</span><span class="keyword operator">&lt;</span>/div<span class="keyword operator">&gt;</span>
      <span class="keyword operator">&lt;</span>/div<span class="keyword operator">&gt;</span>
    <span class="keyword operator">&lt;</span>/div<span class="keyword operator">&gt;</span>
  <span class="support tag script">&lt;/</span><span class="entity tag script">script</span><span class="support tag script">&gt;</span></span>

  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">p</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-default btn-sm</span><span class="string quote">"</span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">status.open = !status.open</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Toggle last panel<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-default btn-sm</span><span class="string quote">"</span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">status.isFirstDisabled = ! status.isFirstDisabled</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Enable / Disable first panel<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">p</span></span><span class="support tag cclose">&gt;</span>

  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">checkbox</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">input</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">checkbox</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">oneAtATime</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      Open only one at a time
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-accordion <span class="support attribute">close-others</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">oneAtATime</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-accordion-group <span class="support attribute">heading</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">Static Header, initially expanded</span><span class="string quote">"</span> <span class="support attribute">is-open</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">status.isFirstOpen</span><span class="string quote">"</span> <span class="support attribute">is-disabled</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">status.isFirstDisabled</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      This content is straight in the template.
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-accordion-group<span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-accordion-group <span class="support attribute">heading</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">{{group.title}}</span><span class="string quote">"</span> <span class="support attribute">ng-repeat</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">group in groups</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      {{group.content}}
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-accordion-group<span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-accordion-group <span class="support attribute">heading</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">Dynamic Body Content</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">p</span></span><span class="support tag cclose">&gt;</span>The body of the uib-accordion group grows to fit the contents<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">p</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-default btn-sm</span><span class="string quote">"</span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">addItem()</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Add Item<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">ng-repeat</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">item in items</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>{{item}}<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-accordion-group<span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-accordion-group <span class="support attribute">heading</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">Custom template</span><span class="string quote">"</span> <span class="support attribute">template-url</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">group-template.html</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      Hello
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-accordion-group<span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-accordion-group <span class="support attribute">heading</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">Delete account</span><span class="string quote">"</span> <span class="support attribute">panel-class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">panel-danger</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">p</span></span><span class="support tag cclose">&gt;</span>Please, to delete your account, click the button below<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">p</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-danger</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Delete<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-accordion-group<span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-accordion-group <span class="support attribute">is-open</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">status.open</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-accordion-heading<span class="support tag cclose">&gt;</span>
        I can have markup, too! <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">i</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">pull-right glyphicon</span><span class="string quote">"</span> <span class="support attribute">ng-class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">i</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-accordion-heading<span class="support tag cclose">&gt;</span>
      This is just some content to illustrate fancy headings.
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-accordion-group<span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-accordion<span class="support tag cclose">&gt;</span>
<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
</code></pre>
                                        </div>
                                    </uib-tab>
                                    <uib-tab index="1" heading="JavaScript">
                                        <div plunker-content="javascript">
                                            <pre ng-non-bindable=""><code data-language="javascript" class="rainbow">angular.<span class="function call">module</span>(<span class="string">'ui.bootstrap.demo'</span>).<span class="function call">controller</span>(<span class="string">'AccordionDemoCtrl'</span>, <span class="storage function">function</span> ($scope) {
  $scope.oneAtATime <span class="keyword operator">=</span> <span class="constant language">true</span>;

  $scope.groups <span class="keyword operator">=</span> [
    {
      title: <span class="string">'Dynamic Group Header - 1'</span>,
      content: <span class="string">'Dynamic Group Body - 1'</span>
    },
    {
      title: <span class="string">'Dynamic Group Header - 2'</span>,
      content: <span class="string">'Dynamic Group Body - 2'</span>
    }
  ];

  $scope.items <span class="keyword operator">=</span> [<span class="string">'Item 1'</span>, <span class="string">'Item 2'</span>, <span class="string">'Item 3'</span>];

<span class="entity function">  $scope.addItem </span><span class="keyword operator">=</span> <span class="keyword">function</span>() {
    <span class="keyword">var</span> newItemNo <span class="keyword operator">=</span> $scope.items.<span class="support property">length</span> <span class="keyword operator">+</span> <span class="constant numeric">1</span>;
    $scope.items.<span class="support method">push</span>(<span class="string">'Item '</span> <span class="keyword operator">+</span> newItemNo);
  };

  $scope.status <span class="keyword operator">=</span> {
    isFirstOpen: <span class="constant language">true</span>,
    isFirstDisabled: <span class="constant language">false</span>
  };
});</code></pre>
                                        </div>
                                    </uib-tab>
                                </uib-tabset>
                            </div>
                        </div>
                    </section>
                    <script>angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
  $scope.oneAtATime = true;

  $scope.groups = [
    {
      title: 'Dynamic Group Header - 1',
      content: 'Dynamic Group Body - 1'
    },
    {
      title: 'Dynamic Group Header - 2',
      content: 'Dynamic Group Body - 2'
    }
  ];

  $scope.items = ['Item 1', 'Item 2', 'Item 3'];

  $scope.addItem = function() {
    var newItemNo = $scope.items.length + 1;
    $scope.items.push('Item ' + newItemNo);
  };

  $scope.status = {
    isFirstOpen: true,
    isFirstDisabled: false
  };
});</script>
                
                    <section id="alert">
                        <div class="page-header">
                          <h1>Alert<small>
                              (<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/alert">ui.bootstrap.alert</a>)
                          </small></h1>
                          </div>
                          <div class="row">
                            <div class="col-md-6 show-grid">
                                <div ng-controller="AlertDemoCtrl">
  <script type="text/ng-template" id="alert.html">
    <div class="alert" style="background-color:#fa39c3;color:white" role="alert">
      <div ng-transclude></div>
    </div>
  </script>

  <uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert>
  <uib-alert template-url="alert.html">A happy alert!</uib-alert>
  <button type="button" class="btn btn-default" ng-click="addAlert()">Add Alert</button>
</div>

                            </div>
                            <div class="col-md-6">
                                <p>This directive can be used both to generate alerts from static and dynamic model data (using the <code>ng-repeat</code> directive).</p>
<h3 id="uib-alert-settings">uib-alert settings</h3>
<ul>
<li><p><code>close()</code>
<small class="badge">$</small> -
A callback function that gets fired when an <code>alert</code> is closed. If the attribute exists, a close button is displayed as well.</p>
</li>
<li><p><code>dismiss-on-timeout</code>
<em>(Default: <code>none</code>)</em> -
Takes the number of milliseconds that specify the timeout duration, after which the alert will be closed. This attribute requires the presence of the <code>close</code> attribute.</p>
</li>
<li><p><code>template-url</code>
<em>(Default: <code>uib/template/alert/alert.html</code>)</em> -
Add the ability to override the template used in the component.</p>
</li>
<li><p><code>type</code>
<em>(Default: <code>warning</code>)</em> -
Defines the type of the alert. Go to <a href="http://getbootstrap.com/components/#alerts">bootstrap page</a> to see the type of alerts available.</p>
</li>
</ul>

                            </div>
                        </div>
                        <hr>
                        <div class="row code">
                            <div class="col-md-12" ng-controller="PlunkerCtrl">
                                <div class="pull-right">
                                    <button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.5.0', '3.3.6', '1.2.5', 'alert')"><i class="glyphicon glyphicon-edit"></i> Edit in plunker</button>
                                </div>
                                <uib-tabset active="activeTab">
                                    <uib-tab index="0" heading="Markup">
                                        <div plunker-content="markup">
                                            <pre ng-non-bindable=""><code data-language="html" class="rainbow"><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">ng-controller</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">AlertDemoCtrl</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
  <span class="source js embedded"><span class="support tag script">&lt;</span><span class="entity tag script">script</span> <span class="entity tag script">type</span>=<span class="string">"text/ng-template"</span> <span class="entity tag script">id</span>=<span class="string">"alert.html"</span><span class="support tag script">&gt;</span>
    <span class="keyword operator">&lt;</span>div <span class="keyword">class</span><span class="keyword operator">=</span><span class="string">"alert"</span> style<span class="keyword operator">=</span><span class="string">"background-color:#fa39c3;color:white"</span> role<span class="keyword operator">=</span><span class="string">"alert"</span><span class="keyword operator">&gt;</span>
      <span class="keyword operator">&lt;</span>div ng<span class="keyword operator">-</span>transclude<span class="keyword operator">&gt;</span><span class="keyword operator">&lt;</span>/div<span class="keyword operator">&gt;</span>
    <span class="keyword operator">&lt;</span>/div<span class="keyword operator">&gt;</span>
  <span class="support tag script">&lt;/</span><span class="entity tag script">script</span><span class="support tag script">&gt;</span></span>

  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-alert <span class="support attribute">ng-repeat</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">alert in alerts</span><span class="string quote">"</span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">{{alert.type}}</span><span class="string quote">"</span> <span class="support attribute">close</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">closeAlert($index)</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>{{alert.msg}}<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-alert<span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-alert <span class="support attribute">template-url</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">alert.html</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>A happy alert!<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-alert<span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">'</span><span class="string value">btn btn-default</span><span class="string quote">'</span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">addAlert()</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Add Alert<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
</code></pre>
                                        </div>
                                    </uib-tab>
                                    <uib-tab index="1" heading="JavaScript">
                                        <div plunker-content="javascript">
                                            <pre ng-non-bindable=""><code data-language="javascript" class="rainbow">angular.<span class="function call">module</span>(<span class="string">'ui.bootstrap.demo'</span>).<span class="function call">controller</span>(<span class="string">'AlertDemoCtrl'</span>, <span class="storage function">function</span> ($scope) {
  $scope.alerts <span class="keyword operator">=</span> [
    { type: <span class="string">'danger'</span>, msg: <span class="string">'Oh snap! Change a few things up and try submitting again.'</span> },
    { type: <span class="string">'success'</span>, msg: <span class="string">'Well done! You successfully read this important alert message.'</span> }
  ];

<span class="entity function">  $scope.addAlert </span><span class="keyword operator">=</span> <span class="keyword">function</span>() {
    $scope.alerts.<span class="support method">push</span>({msg: <span class="string">'Another alert!'</span>});
  };

<span class="entity function">  $scope.closeAlert </span><span class="keyword operator">=</span> <span class="keyword">function</span>(index) {
    $scope.alerts.<span class="function call">splice</span>(index, <span class="constant numeric">1</span>);
  };
});</code></pre>
                                        </div>
                                    </uib-tab>
                                </uib-tabset>
                            </div>
                        </div>
                    </section>
                    <script>angular.module('ui.bootstrap.demo').controller('AlertDemoCtrl', function ($scope) {
  $scope.alerts = [
    { type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' },
    { type: 'success', msg: 'Well done! You successfully read this important alert message.' }
  ];

  $scope.addAlert = function() {
    $scope.alerts.push({msg: 'Another alert!'});
  };

  $scope.closeAlert = function(index) {
    $scope.alerts.splice(index, 1);
  };
});</script>
                
                    <section id="buttons">
                        <div class="page-header">
                          <h1>Buttons<small>
                              (<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/buttons">ui.bootstrap.buttons</a>)
                          </small></h1>
                          </div>
                          <div class="row">
                            <div class="col-md-6 show-grid">
                                <div ng-controller="ButtonsCtrl">
    <h4>Single toggle</h4>
    <pre>{{singleModel}}</pre>
    <button type="button" class="btn btn-primary" ng-model="singleModel" uib-btn-checkbox="" btn-checkbox-true="1" btn-checkbox-false="0">
        Single Toggle
    </button>
    <h4>Checkbox</h4>
    <pre>Model: {{checkModel}}</pre>
    <pre>Results: {{checkResults}}</pre>
    <div class="btn-group">
        <label class="btn btn-primary" ng-model="checkModel.left" uib-btn-checkbox="">Left</label>
        <label class="btn btn-primary" ng-model="checkModel.middle" uib-btn-checkbox="">Middle</label>
        <label class="btn btn-primary" ng-model="checkModel.right" uib-btn-checkbox="">Right</label>
    </div>
    <h4>Radio &amp; Uncheckable Radio</h4>
    <pre>{{radioModel || 'null'}}</pre>
    <div class="btn-group">
        <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Left'">Left</label>
        <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Middle'">Middle</label>
        <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Right'">Right</label>
    </div>
    <div class="btn-group">
        <label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Left'" uncheckable="">Left</label>
        <label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Middle'" uncheckable="">Middle</label>
        <label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Right'" uib-uncheckable="uncheckable">Right</label>
    </div>
    <div>
        <button class="btn btn-default" ng-click="uncheckable = !uncheckable">
            Toggle uncheckable
        </button>
    </div>
</div>

                            </div>
                            <div class="col-md-6">
                                <p>With the buttons directive, we can make a group of buttons behave like a set of checkboxes (<code>uib-btn-checkbox</code>) or behave like a set of radio buttons (<code>uib-btn-radio</code>).</p>
<h3 id="uib-btn-checkbox-settings">uib-btn-checkbox settings</h3>
<ul>
<li><p><code>btn-checkbox-false</code>
<em>(Default: <code>false</code>)</em> -
Sets the value for the unchecked status.</p>
</li>
<li><p><code>btn-checkbox-true</code>
<em>(Default: <code>true</code>)</em> -
Sets the value for the checked status.</p>
</li>
<li><p><code>ng-model</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i> -
Model where we set the checkbox status. By default <code>true</code> or <code>false</code>.</p>
</li>
</ul>
<h3 id="uib-btn-radio-settings">uib-btn-radio settings</h3>
<ul>
<li><p><code>ng-model</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i> -
Model where we set the radio status. All radio buttons in a group should use the same <code>ng-model</code>.</p>
</li>
<li><p><code>uib-btn-radio</code> -
<small class="badge">$</small>
Value to assign to the <code>ng-model</code> if we check this radio button.</p>
</li>
<li><p><code>uib-uncheckable</code>
<small class="badge">$</small>
<em>(Default: <code>null</code>)</em> -
An expression that evaluates to a truthy or falsy value that determines whether the <code>uncheckable</code> attribute is present.</p>
</li>
<li><p><code>uncheckable</code>
<small class="badge">B</small> -
Whether a radio button can be unchecked or not.</p>
</li>
</ul>
<h3 id="additional-settings-uibbuttonconfig-">Additional settings <code>uibButtonConfig</code></h3>
<ul>
<li><p><code>activeClass</code>
<em>(Default: <code>active</code>)</em> -
Class to apply to the checked buttons.</p>
</li>
<li><p><code>toggleEvent</code>
<em>(Default: <code>click</code>)</em> -
Event used to toggle the buttons.</p>
</li>
</ul>

                            </div>
                        </div>
                        <hr>
                        <div class="row code">
                            <div class="col-md-12" ng-controller="PlunkerCtrl">
                                <div class="pull-right">
                                    <button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.5.0', '3.3.6', '1.2.5', 'buttons')"><i class="glyphicon glyphicon-edit"></i> Edit in plunker</button>
                                </div>
                                <uib-tabset active="activeTab">
                                    <uib-tab index="0" heading="Markup">
                                        <div plunker-content="markup">
                                            <pre ng-non-bindable=""><code data-language="html" class="rainbow"><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">ng-controller</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">ButtonsCtrl</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>Single toggle<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">pre</span></span><span class="support tag cclose">&gt;</span>{{singleModel}}<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">pre</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-primary</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">singleModel</span><span class="string quote">"</span> uib-btn-checkbox <span class="support attribute">btn-checkbox-true</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">1</span><span class="string quote">"</span> <span class="support attribute">btn-checkbox-false</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">0</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
        Single Toggle
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>Checkbox<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">pre</span></span><span class="support tag cclose">&gt;</span>Model: {{checkModel}}<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">pre</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">pre</span></span><span class="support tag cclose">&gt;</span>Results: {{checkResults}}<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">pre</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn-group</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">label</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-primary</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">checkModel.left</span><span class="string quote">"</span> uib-btn-checkbox<span class="support tag cclose">&gt;</span>Left<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">label</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-primary</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">checkModel.middle</span><span class="string quote">"</span> uib-btn-checkbox<span class="support tag cclose">&gt;</span>Middle<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">label</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-primary</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">checkModel.right</span><span class="string quote">"</span> uib-btn-checkbox<span class="support tag cclose">&gt;</span>Right<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>Radio &amp;amp; Uncheckable Radio<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">pre</span></span><span class="support tag cclose">&gt;</span>{{radioModel || 'null'}}<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">pre</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn-group</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">label</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-primary</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">radioModel</span><span class="string quote">"</span> <span class="support attribute">uib-btn-radio</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">'Left'</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Left<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">label</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-primary</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">radioModel</span><span class="string quote">"</span> <span class="support attribute">uib-btn-radio</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">'Middle'</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Middle<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">label</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-primary</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">radioModel</span><span class="string quote">"</span> <span class="support attribute">uib-btn-radio</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">'Right'</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Right<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn-group</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">label</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-success</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">radioModel</span><span class="string quote">"</span> <span class="support attribute">uib-btn-radio</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">'Left'</span><span class="string quote">"</span> uncheckable<span class="support tag cclose">&gt;</span>Left<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">label</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-success</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">radioModel</span><span class="string quote">"</span> <span class="support attribute">uib-btn-radio</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">'Middle'</span><span class="string quote">"</span> uncheckable<span class="support tag cclose">&gt;</span>Middle<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">label</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-success</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">radioModel</span><span class="string quote">"</span> <span class="support attribute">uib-btn-radio</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">'Right'</span><span class="string quote">"</span> <span class="support attribute">uib-uncheckable</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">uncheckable</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Right<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-default</span><span class="string quote">"</span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">uncheckable = !uncheckable</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
            Toggle uncheckable
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
</code></pre>
                                        </div>
                                    </uib-tab>
                                    <uib-tab index="1" heading="JavaScript">
                                        <div plunker-content="javascript">
                                            <pre ng-non-bindable=""><code data-language="javascript" class="rainbow">angular.<span class="function call">module</span>(<span class="string">'ui.bootstrap.demo'</span>).<span class="function call">controller</span>(<span class="string">'ButtonsCtrl'</span>, <span class="storage function">function</span> ($scope) {
  $scope.singleModel <span class="keyword operator">=</span> <span class="constant numeric">1</span>;

  $scope.radioModel <span class="keyword operator">=</span> <span class="string">'Middle'</span>;

  $scope.checkModel <span class="keyword operator">=</span> {
    left: <span class="constant language">false</span>,
    middle: <span class="constant language">true</span>,
    right: <span class="constant language">false</span>
  };

  $scope.checkResults <span class="keyword operator">=</span> [];

  $scope.$<span class="function call">watchCollection</span>(<span class="string">'checkModel'</span>, <span class="storage function">function</span> () {
    $scope.checkResults <span class="keyword operator">=</span> [];
    angular.<span class="keyword">forEach</span>($scope.checkModel, <span class="storage function">function</span> (value, key) {
      <span class="keyword">if</span> (value) {
        $scope.checkResults.<span class="support method">push</span>(key);
      }
    });
  });
});</code></pre>
                                        </div>
                                    </uib-tab>
                                </uib-tabset>
                            </div>
                        </div>
                    </section>
                    <script>angular.module('ui.bootstrap.demo').controller('ButtonsCtrl', function ($scope) {
  $scope.singleModel = 1;

  $scope.radioModel = 'Middle';

  $scope.checkModel = {
    left: false,
    middle: true,
    right: false
  };

  $scope.checkResults = [];

  $scope.$watchCollection('checkModel', function () {
    $scope.checkResults = [];
    angular.forEach($scope.checkModel, function (value, key) {
      if (value) {
        $scope.checkResults.push(key);
      }
    });
  });
});</script>
                
                    <section id="carousel">
                        <div class="page-header">
                          <h1>Carousel<small>
                              (<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/carousel">ui.bootstrap.carousel</a>)
                          </small></h1>
                          </div>
                          <div class="row">
                            <div class="col-md-6 show-grid">
                                <div ng-controller="CarouselDemoCtrl">
  <div style="height: 305px">
    <uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
      <uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
        <img ng-src="{{slide.image}}" style="margin:auto;">
        <div class="carousel-caption">
          <h4>Slide {{slide.id}}</h4>
          <p>{{slide.text}}</p>
        </div>
      </uib-slide>
    </uib-carousel>
  </div>
  <div class="row">
    <div class="col-md-6">
      <button type="button" class="btn btn-info" ng-click="addSlide()">Add Slide</button>
      <button type="button" class="btn btn-info" ng-click="randomize()">Randomize slides</button>
      <div class="checkbox">
        <label>
          <input type="checkbox" ng-model="noWrapSlides">
          Disable Slide Looping
        </label>
      </div>
    </div>
    <div class="col-md-6">
      Interval, in milliseconds: <input type="number" class="form-control" ng-model="myInterval">
      <br>Enter a negative number or 0 to stop the interval.
    </div>
  </div>
</div>

                            </div>
                            <div class="col-md-6">
                                <p>Carousel creates a carousel similar to bootstrap's image carousel.</p>
<p>The carousel also offers support for touchscreen devices in the form of swiping. To enable swiping, load the <code>ngTouch</code> module as a dependency.</p>
<p>Use a <code>&lt;uib-carousel&gt;</code> element with <code>&lt;uib-slide&gt;</code> elements inside it.</p>
<h3 id="uib-carousel-settings">uib-carousel settings</h3>
<ul>
<li><p><code>active</code>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>Index of first slide</code>)</em> -
Index of current active slide.</p>
</li>
<li><p><code>interval</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>none</code>)</em> -
Sets an interval to cycle through the slides. You need a number bigger than 0 to make the interval work.</p>
</li>
<li><p><code>no-pause</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>false</code>)</em> -
The interval pauses on mouseover. Setting this to truthy, disables this pause.</p>
</li>
<li><p><code>no-transition</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>false</code>)</em> -
Whether to disable the transition animation between slides. Setting this to truthy, disables this transition.</p>
</li>
<li><p><code>no-wrap</code>
<small class="badge">$</small>
<em>(Default: <code>false</code>)</em> -
Disables the looping of slides. Setting <code>no-wrap</code> to an expression which evaluates to a truthy value will prevent looping.</p>
</li>
<li><p><code>template-url</code>
<em>(Default: <code>uib/template/carousel/carousel.html</code>)</em> -
Add the ability to override the template used on the component.</p>
</li>
</ul>
<h3 id="uib-slide-settings">uib-slide settings</h3>
<ul>
<li><p><code>actual</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>none</code>)</em> -
Use this attribute to bind the slide model (or any object of interest) onto the slide scope, which makes it available for customization in the carousel template.</p>
</li>
<li><p><code>index</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>none</code>)</em> -
The index of the slide. Must be unique.</p>
</li>
<li><p><code>template-url</code>
<em>(Default: <code>uib/template/carousel/slide.html</code>)</em> -
Add the ability to override the template used on the component.</p>
</li>
</ul>

                            </div>
                        </div>
                        <hr>
                        <div class="row code">
                            <div class="col-md-12" ng-controller="PlunkerCtrl">
                                <div class="pull-right">
                                    <button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.5.0', '3.3.6', '1.2.5', 'carousel')"><i class="glyphicon glyphicon-edit"></i> Edit in plunker</button>
                                </div>
                                <uib-tabset active="activeTab">
                                    <uib-tab index="0" heading="Markup">
                                        <div plunker-content="markup">
                                            <pre ng-non-bindable=""><code data-language="html" class="rainbow"><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">ng-controller</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">CarouselDemoCtrl</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">style</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">height: 305px</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-carousel <span class="support attribute">active</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">active</span><span class="string quote">"</span> <span class="support attribute">interval</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">myInterval</span><span class="string quote">"</span> <span class="support attribute">no-wrap</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">noWrapSlides</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-slide <span class="support attribute">ng-repeat</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">slide in slides track by slide.id</span><span class="string quote">"</span> <span class="support attribute">index</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">slide.id</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">img</span></span> <span class="support attribute">ng-src</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">{{slide.image}}</span><span class="string quote">"</span> <span class="support attribute">style</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">margin:auto;</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">carousel-caption</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
          <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>Slide {{slide.id}}<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>
          <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">p</span></span><span class="support tag cclose">&gt;</span>{{slide.text}}<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">p</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-slide<span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-carousel<span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">row</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">col-md-6</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-info</span><span class="string quote">"</span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">addSlide()</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Add Slide<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-info</span><span class="string quote">"</span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">randomize()</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Randomize slides<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">checkbox</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>
          <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">input</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">checkbox</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">noWrapSlides</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
          Disable Slide Looping
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">col-md-6</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      Interval, in milliseconds: <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">input</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">number</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-control</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">myInterval</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">br</span></span> <span class="support tag cclose">/&gt;</span>Enter a negative number or 0 to stop the interval.
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
</code></pre>
                                        </div>
                                    </uib-tab>
                                    <uib-tab index="1" heading="JavaScript">
                                        <div plunker-content="javascript">
                                            <pre ng-non-bindable=""><code data-language="javascript" class="rainbow">angular.<span class="function call">module</span>(<span class="string">'ui.bootstrap.demo'</span>).<span class="function call">controller</span>(<span class="string">'CarouselDemoCtrl'</span>, <span class="storage function">function</span> ($scope) {
  $scope.myInterval <span class="keyword operator">=</span> <span class="constant numeric">5000</span>;
  $scope.noWrapSlides <span class="keyword operator">=</span> <span class="constant language">false</span>;
  $scope.active <span class="keyword operator">=</span> <span class="constant numeric">0</span>;
  <span class="keyword">var</span> slides <span class="keyword operator">=</span> $scope.slides <span class="keyword operator">=</span> [];
  <span class="keyword">var</span> currIndex <span class="keyword operator">=</span> <span class="constant numeric">0</span>;

<span class="entity function">  $scope.addSlide </span><span class="keyword operator">=</span> <span class="keyword">function</span>() {
    <span class="keyword">var</span> newWidth <span class="keyword operator">=</span> <span class="constant numeric">600</span> <span class="keyword operator">+</span> slides.<span class="support property">length</span> <span class="keyword operator">+</span> <span class="constant numeric">1</span>;
    slides.<span class="support method">push</span>({
      image: 'http:<span class="comment">//lorempixel.com/' + newWidth + '/300',</span>
      text: [<span class="string">'Nice image'</span>,'Awesome photograph','That is so cool','I love that'][slides.<span class="support property">length</span> % <span class="constant numeric">4</span>],
      id: currIndex<span class="keyword operator">+</span><span class="keyword operator">+</span>
    });
  };

<span class="entity function">  $scope.randomize </span><span class="keyword operator">=</span> <span class="keyword">function</span>() {
    <span class="keyword">var</span> indexes <span class="keyword operator">=</span> <span class="function call">generateIndexesArray</span>();
    <span class="function call">assignNewIndexesToSlides</span>(indexes);
  };

  <span class="keyword">for</span> (<span class="keyword">var</span> i <span class="keyword operator">=</span> <span class="constant numeric">0</span>; i <span class="keyword operator">&lt;</span> <span class="constant numeric">4</span>; i<span class="keyword operator">+</span><span class="keyword operator">+</span>) {
    $scope.<span class="function call">addSlide</span>();
  }

  <span class="comment">// Randomize logic below</span>

  <span class="storage function">function</span> <span class="entity name function">assignNewIndexesToSlides</span>(indexes) {
    <span class="keyword">for</span> (<span class="keyword">var</span> i <span class="keyword operator">=</span> <span class="constant numeric">0</span>, l <span class="keyword operator">=</span> slides.<span class="support property">length</span>; i <span class="keyword operator">&lt;</span> l; i<span class="keyword operator">+</span><span class="keyword operator">+</span>) {
      slides[i].id <span class="keyword operator">=</span> indexes.<span class="function call">pop</span>();
    }
  }

  <span class="storage function">function</span> <span class="entity name function">generateIndexesArray</span>() {
    <span class="keyword">var</span> indexes <span class="keyword operator">=</span> [];
    <span class="keyword">for</span> (<span class="keyword">var</span> i <span class="keyword operator">=</span> <span class="constant numeric">0</span>; i <span class="keyword operator">&lt;</span> currIndex; <span class="keyword operator">+</span><span class="keyword operator">+</span>i) {
      indexes[i] <span class="keyword operator">=</span> i;
    }
    <span class="keyword">return</span> <span class="function call">shuffle</span>(indexes);
  }

  <span class="comment">// http://stackoverflow.com/questions/962802#962890</span>
  <span class="storage function">function</span> <span class="entity name function">shuffle</span>(<span class="keyword">array</span>) {
    <span class="keyword">var</span> tmp, current, top <span class="keyword operator">=</span> <span class="keyword">array</span>.<span class="support property">length</span>;

    <span class="keyword">if</span> (top) {
      <span class="keyword">while</span> (<span class="keyword operator">-</span><span class="keyword operator">-</span>top) {
        current <span class="keyword operator">=</span> Math.<span class="function call">floor</span>(Math.<span class="function call">random</span>() <span class="keyword operator">*</span> (top <span class="keyword operator">+</span> <span class="constant numeric">1</span>));
        tmp <span class="keyword operator">=</span> <span class="keyword">array</span>[current];
        <span class="keyword">array</span>[current] <span class="keyword operator">=</span> <span class="keyword">array</span>[top];
        <span class="keyword">array</span>[top] <span class="keyword operator">=</span> tmp;
      }
    }

    <span class="keyword">return</span> <span class="keyword">array</span>;
  }
});
</code></pre>
                                        </div>
                                    </uib-tab>
                                </uib-tabset>
                            </div>
                        </div>
                    </section>
                    <script>angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope) {
  $scope.myInterval = 5000;
  $scope.noWrapSlides = false;
  $scope.active = 0;
  var slides = $scope.slides = [];
  var currIndex = 0;

  $scope.addSlide = function() {
    var newWidth = 600 + slides.length + 1;
    slides.push({
      image: 'http://lorempixel.com/' + newWidth + '/300',
      text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4],
      id: currIndex++
    });
  };

  $scope.randomize = function() {
    var indexes = generateIndexesArray();
    assignNewIndexesToSlides(indexes);
  };

  for (var i = 0; i < 4; i++) {
    $scope.addSlide();
  }

  // Randomize logic below

  function assignNewIndexesToSlides(indexes) {
    for (var i = 0, l = slides.length; i < l; i++) {
      slides[i].id = indexes.pop();
    }
  }

  function generateIndexesArray() {
    var indexes = [];
    for (var i = 0; i < currIndex; ++i) {
      indexes[i] = i;
    }
    return shuffle(indexes);
  }

  // http://stackoverflow.com/questions/962802#962890
  function shuffle(array) {
    var tmp, current, top = array.length;

    if (top) {
      while (--top) {
        current = Math.floor(Math.random() * (top + 1));
        tmp = array[current];
        array[current] = array[top];
        array[top] = tmp;
      }
    }

    return array;
  }
});
</script>
                
                    <section id="collapse">
                        <div class="page-header">
                          <h1>Collapse<small>
                              (<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/collapse">ui.bootstrap.collapse</a>)
                          </small></h1>
                          </div>
                          <div class="row">
                            <div class="col-md-6 show-grid">
                                <div ng-controller="CollapseDemoCtrl">
  <button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
  <hr>
  <div uib-collapse="isCollapsed">
    <div class="well well-lg">Some content</div>
  </div>
</div>

                            </div>
                            <div class="col-md-6">
                                <p><strong>uib-collapse</strong> provides a simple way to hide and show an element with a css transition</p>
<h3 id="uib-collapse-settings">uib-collapse settings</h3>
<ul>
<li><p><code>collapsed()</code>
<small class="badge">$</small> -
An optional expression called after the element finished collapsing.</p>
</li>
<li><p><code>collapsing()</code>
<small class="badge">$</small> -
An optional expression called before the element begins collapsing.
If the expression returns a promise, animation won't start until the promise resolves.
If the returned promise is rejected, collapsing will be cancelled.</p>
</li>
<li><p><code>expanded()</code>
<small class="badge">$</small> -
An optional expression called after the element finished expanding.</p>
</li>
<li><p><code>expanding()</code>
<small class="badge">$</small> -
An optional expression called before the element begins expanding.
If the expression returns a promise, animation won't start until the promise resolves.
If the returned promise is rejected, expanding will be cancelled.</p>
</li>
<li><p><code>uib-collapse</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>false</code>)</em> -
Whether the element should be collapsed or not.</p>
</li>
</ul>

                            </div>
                        </div>
                        <hr>
                        <div class="row code">
                            <div class="col-md-12" ng-controller="PlunkerCtrl">
                                <div class="pull-right">
                                    <button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.5.0', '3.3.6', '1.2.5', 'collapse')"><i class="glyphicon glyphicon-edit"></i> Edit in plunker</button>
                                </div>
                                <uib-tabset active="activeTab">
                                    <uib-tab index="0" heading="Markup">
                                        <div plunker-content="markup">
                                            <pre ng-non-bindable=""><code data-language="html" class="rainbow"><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">ng-controller</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">CollapseDemoCtrl</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-default</span><span class="string quote">"</span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">isCollapsed = !isCollapsed</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Toggle collapse<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">hr</span></span><span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">uib-collapse</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">isCollapsed</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">well well-lg</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Some content<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
</code></pre>
                                        </div>
                                    </uib-tab>
                                    <uib-tab index="1" heading="JavaScript">
                                        <div plunker-content="javascript">
                                            <pre ng-non-bindable=""><code data-language="javascript" class="rainbow">angular.<span class="function call">module</span>(<span class="string">'ui.bootstrap.demo'</span>).<span class="function call">controller</span>(<span class="string">'CollapseDemoCtrl'</span>, <span class="storage function">function</span> ($scope) {
  $scope.isCollapsed <span class="keyword operator">=</span> <span class="constant language">false</span>;
});
</code></pre>
                                        </div>
                                    </uib-tab>
                                </uib-tabset>
                            </div>
                        </div>
                    </section>
                    <script>angular.module('ui.bootstrap.demo').controller('CollapseDemoCtrl', function ($scope) {
  $scope.isCollapsed = false;
});
</script>
                
                    <section id="dateparser">
                        <div class="page-header">
                          <h1>Dateparser<small>
                              (<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/dateparser">ui.bootstrap.dateparser</a>)
                          </small></h1>
                          </div>
                          <div class="row">
                            <div class="col-md-6 show-grid">
                                <div ng-controller="DateParserDemoCtrl">
  <h4>Formatting codes playground</h4>
  <p class="form-group">
    <label>Define your format</label>
    <input type="text" ng-model="format" class="form-control">
  </p>
  <p class="form-group">
    <label>Result</label>
    <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="date">
  </p>
</div>

                            </div>
                            <div class="col-md-6">
                                <p>The <code>uibDateParser</code> is what the <code>uib-datepicker</code> uses internally to parse the dates. You can use it standalone by injecting the <code>uibDateParser</code> service where you need it.</p>
<p>The public API for the dateParser is a single method called <code>parse</code>.</p>
<p>Certain format codes support i18n. Check this <a href="https://docs.angularjs.org/guide/i18n">guide</a> for more information.</p>
<h3 id="uibdateparser-s-parse-function">uibDateParser's parse function</h3>
<h5 id="parameters">parameters</h5>
<ul>
<li><p><code>input</code>
<em>(Type: <code>string</code>, Example: <code>2004/Sep/4</code>)</em> -
The input date to parse.</p>
</li>
<li><p><code>format</code>
<em>(Type: <code>string</code>, Example: <code>yyyy/MMM/d</code>)</em> -
The format we want to use. Check all the supported formats below.</p>
</li>
<li><p><code>baseDate</code>
<em>(Type: <code>Date</code>, Example: <code>new Date()</code>)</em> -
If you want to parse a date but maintain the timezone, you can pass an existing date here.</p>
</li>
</ul>
<h5 id="return">return</h5>
<ul>
<li>If the specified input matches the format, a new date with the input will be returned, otherwise, it will return undefined.</li>
</ul>
<h3 id="uibdateparser-s-format-codes">uibDateParser's format codes</h3>
<ul>
<li><p><code>yyyy</code>
<em>(Example: <code>2015</code>)</em> -
Parses a 4 digits year.</p>
</li>
<li><p><code>yy</code>
<em>(Example: <code>15</code>)</em> -
Parses a 2 digits year.</p>
</li>
<li><p><code>y</code>
<em>(Example: <code>15</code>)</em> -
Parses a year with 1, 2, 3, or 4 digits.</p>
</li>
<li><p><code>MMMM</code>
<em>(Example: <code>February</code>, i18n support)</em> -
Parses the full name of a month.</p>
</li>
<li><p><code>MMM</code>
<em>(Example: <code>Feb</code>, i18n support)</em> -
Parses the short name of a month.</p>
</li>
<li><p><code>MM</code>
<em>(Example: <code>12</code>, Leading 0)</em> -
Parses a numeric month.</p>
</li>
<li><p><code>M</code>
<em>(Example: <code>3</code>)</em> -
Parses a numeric month.</p>
</li>
<li><p><code>M!</code>
<em>(Example: <code>3</code> or <code>03</code>)</em> -
Parses a numeric month, but allowing an optional leading zero</p>
</li>
<li><p><code>dd</code>
<em>(Example: <code>05</code>, Leading 0)</em> -
Parses a numeric day.</p>
</li>
<li><p><code>d</code>
<em>(Example: <code>5</code>)</em> -
Parses a numeric day.</p>
</li>
<li><p><code>d!</code>
<em>(Example: <code>3</code> or <code>03</code>)</em> -
Parses a numeric day, but allowing an optional leading zero</p>
</li>
<li><p><code>EEEE</code>
<em>(Example: <code>Sunday</code>, i18n support)</em> -
Parses the full name of a day.</p>
</li>
<li><p><code>EEE</code>
<em>(Example: <code>Mon</code>, i18n support)</em> -
Parses the short name of a day.</p>
</li>
<li><p><code>HH</code>
<em>(Example: <code>14</code>, Leading 0)</em> -
Parses a 24 hours time.</p>
</li>
<li><p><code>H</code>
<em>(Example: <code>3</code>)</em> -
Parses a 24 hours time.</p>
</li>
<li><p><code>hh</code>
<em>(Example: <code>11</code>, Leading 0)</em> -
Parses a 12 hours time.</p>
</li>
<li><p><code>h</code>
<em>(Example: <code>3</code>)</em> -
Parses a 12 hours time.</p>
</li>
<li><p><code>mm</code>
<em>(Example: <code>09</code>, Leading 0)</em> -
Parses the minutes.</p>
</li>
<li><p><code>m</code>
<em>(Example: <code>3</code>)</em> -
Parses the minutes.</p>
</li>
<li><p><code>sss</code>
<em>(Example: <code>094</code>, Leading 0)</em> -
Parses the milliseconds.</p>
</li>
<li><p><code>ss</code>
<em>(Example: <code>08</code>, Leading 0)</em> -
Parses the seconds.</p>
</li>
<li><p><code>s</code>
<em>(Example: <code>22</code>)</em> -
Parses the seconds.</p>
</li>
<li><p><code>a</code>
<em>(Example: <code>10AM</code>)</em> -
Parses a 12 hours time with AM/PM.</p>
</li>
<li><p><code>Z</code>
<em>(Example: <code>-0800</code>)</em> -
Parses the timezone offset in a signed 4 digit representation</p>
</li>
<li><p><code>ww</code>
<em>(Example: <code>03</code>, Leading 0)</em> -
Parses the week number</p>
</li>
<li><p><code>w</code>
<em>(Example: <code>03</code>)</em> -
Parses the week number</p>
</li>
<li><p><code>G</code>, <code>GG</code>, <code>GGG</code>
<em>(Example: <code>AD</code>)</em> -
Parses the era (<code>AD</code> or <code>BC</code>)</p>
</li>
<li><code>GGGG</code>
<em>(Example: <code>Anno Domini</code>)</em> -
Parses the long form of the era (<code>Anno Domini</code> or <code>Before Christ</code>)</li>
</ul>
<p>* The ones marked with <code>Leading 0</code>, needs a leading 0 for values less than 10. Exception being milliseconds which needs it for values under 100.</p>
<p>** It also supports <code>fullDate|longDate|medium|mediumDate|mediumTime|short|shortDate|shortTime</code> as the format for parsing.</p>
<p>*** It supports template literals as a string between the single quote <code>'</code> character, i.e. <code>'The Date is' MM/DD/YYYY</code>. If one wants the literal single quote character, one must use <code>''''</code>.</p>

                            </div>
                        </div>
                        <hr>
                        <div class="row code">
                            <div class="col-md-12" ng-controller="PlunkerCtrl">
                                <div class="pull-right">
                                    <button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.5.0', '3.3.6', '1.2.5', 'dateparser')"><i class="glyphicon glyphicon-edit"></i> Edit in plunker</button>
                                </div>
                                <uib-tabset active="activeTab">
                                    <uib-tab index="0" heading="Markup">
                                        <div plunker-content="markup">
                                            <pre ng-non-bindable=""><code data-language="html" class="rainbow"><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">ng-controller</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">DateParserDemoCtrl</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>Formatting codes playground<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">p</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-group</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>Define your format<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">input</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">text</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">format</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-control</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">p</span></span><span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">p</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-group</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>Result<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">input</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">text</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-control</span><span class="string quote">"</span> <span class="support attribute">uib-datepicker-popup</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">{{format}}</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">date</span><span class="string quote">"</span> <span class="support tag cclose">/&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">p</span></span><span class="support tag cclose">&gt;</span>
<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
</code></pre>
                                        </div>
                                    </uib-tab>
                                    <uib-tab index="1" heading="JavaScript">
                                        <div plunker-content="javascript">
                                            <pre ng-non-bindable=""><code data-language="javascript" class="rainbow">angular.<span class="function call">module</span>(<span class="string">'ui.bootstrap.demo'</span>).<span class="function call">controller</span>(<span class="string">'DateParserDemoCtrl'</span>, <span class="storage function">function</span> ($scope, uibDateParser) {
  $scope.format <span class="keyword operator">=</span> <span class="string">'yyyy/MM/dd'</span>;
  $scope.date <span class="keyword operator">=</span> <span class="keyword">new</span> <span class="entity function">Date</span>();
});
</code></pre>
                                        </div>
                                    </uib-tab>
                                </uib-tabset>
                            </div>
                        </div>
                    </section>
                    <script>angular.module('ui.bootstrap.demo').controller('DateParserDemoCtrl', function ($scope, uibDateParser) {
  $scope.format = 'yyyy/MM/dd';
  $scope.date = new Date();
});
</script>
                
                    <section id="datepicker">
                        <div class="page-header">
                          <h1>Datepicker<small>
                              (<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/datepicker">ui.bootstrap.datepicker</a>)
                          </small></h1>
                          </div>
                          <div class="row">
                            <div class="col-md-6 show-grid">
                                <style>
  .full button span {
    background-color: limegreen;
    border-radius: 32px;
    color: black;
  }
  .partially button span {
    background-color: orange;
    border-radius: 32px;
    color: black;
  }
</style>
<div ng-controller="DatepickerDemoCtrl">
    <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>

    <h4>Inline</h4>
    <div style="display:inline-block; min-height:290px;">
      <uib-datepicker ng-model="dt" class="well well-sm" datepicker-options="inlineOptions"></uib-datepicker>
    </div>

    <h4>Popup</h4>
    <div class="row">
      <div class="col-md-6">
        <p class="input-group">
          <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats">
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>
      </div>

      <div class="col-md-6">
        <p class="input-group">
          <input type="text" class="form-control" uib-datepicker-popup="" ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close">
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <label>Format: <span class="muted-text">(manual alternate <em>{{altInputFormats[0]}}</em>)</span></label> <select class="form-control" ng-model="format" ng-options="f for f in formats"><option></option></select>
      </div>
    </div>

    <hr>
    <button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button>
    <button type="button" class="btn btn-sm btn-default" ng-click="setDate(2009, 7, 24)">2009-08-24</button>
    <button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
    <button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" uib-tooltip="After today restriction">Min date</button>
</div>

                            </div>
                            <div class="col-md-6">
                                <p>Our datepicker is flexible and fully customizable.</p>
<p>You can navigate through days, months and years.</p>
<p>It comes in two formats, an inline <code>uib-datepicker</code> and an <code>uib-datepicker-popup</code> to be embedded in an input.</p>
<p>The datepicker has 3 modes:</p>
<ul>
<li><code>day</code> - In this mode you're presented with a 6-week calendar for a specified month.</li>
<li><code>month</code> - In this mode you can select a month within a selected year.</li>
<li><code>year</code> - In this mode you are presented with a range of years (20 by default).</li>
</ul>
<h3 id="uib-datepicker-settings">uib-datepicker settings</h3>
<ul>
<li><p><code>ng-model</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i> -
The date object. Needs to be a Javascript Date object.</p>
</li>
<li><p><code>ng-model-options</code>
<small class="badge">$</small>
<small class="badge">C</small>
<em>(Default: <code>{}</code>)</em> -
Supported <a href="https://docs.angularjs.org/api/ng/directive/ngModelOptions">angular ngModelOptions</a>:</p>
<ul>
<li>allowInvalid</li>
<li>timezone</li>
</ul>
</li>
<li><p><code>template-url</code>
<em>(Default: <code>uib/template/datepicker/datepicker.html</code>)</em> -
Add the ability to override the template used on the component.</p>
</li>
</ul>
<p>Apart from the previous settings, to configure the uib-datepicker you need to create an object in Javascript with all the options and use it on the <code>datepicker-options</code> attribute:</p>
<ul>
<li><p><code>datepicker-options</code>
<small class="badge">$</small> -
An object to configure the datepicker in one place.</p>
<ul>
<li><p><code>customClass (date, mode)</code> -
An optional expression to add classes based on passing a date and current mode.</p>
</li>
<li><p><code>dateDisabled (date, mode)</code> -
An optional expression to disable visible options based on passing a date and current mode.</p>
</li>
<li><p><code>datepickerMode</code>
<small class="badge">C</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>day</code>)</em> -
Current mode of the datepicker <em>(day|month|year)</em>. Can be used to initialize the datepicker in a specific mode.</p>
</li>
<li><p><code>formatDay</code>
<small class="badge">C</small>
<em>(Default: <code>dd</code>)</em> -
Format of day in month.</p>
</li>
<li><p><code>formatMonth</code>
<small class="badge">C</small>
<em>(Default: <code>MMMM</code>)</em> -
Format of month in year.</p>
</li>
<li><p><code>formatYear</code>
<small class="badge">C</small>
<em>(Default: <code>yyyy</code>)</em> -
Format of year in year range.</p>
</li>
<li><p><code>formatDayHeader</code>
<small class="badge">C</small>
<em>(Default: <code>EEE</code>)</em> -
Format of day in week header.</p>
</li>
<li><p><code>formatDayTitle</code>
<small class="badge">C</small>
<em>(Default: <code>MMMM yyyy</code>)</em> -
Format of title when selecting day.</p>
</li>
<li><p><code>formatMonthTitle</code>
<small class="badge">C</small>
<em>(Default: <code>yyyy</code>)</em> -
Format of title when selecting month.</p>
</li>
<li><p><code>initDate</code>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>null</code>)</em> -
The initial date view when no model value is specified.</p>
</li>
<li><p><code>maxDate</code>
<small class="badge">C</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>null</code>)</em> -
Defines the maximum available date.</p>
</li>
<li><p><code>maxMode</code>
<small class="badge">C</small>
  <i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>year</code>)</em> -
Sets an upper limit for mode.</p>
</li>
<li><p><code>minDate</code>
<small class="badge">C</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>null</code>)</em> -
Defines the minimum available date.</p>
</li>
<li><p><code>minMode</code>
<small class="badge">C</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>day</code>)</em> -
Sets a lower limit for mode.</p>
</li>
<li><p><code>shortcutPropagation</code>
<small class="badge">C</small>
<em>(Default: <code>false</code>)</em> -
An option to disable the propagation of the keydown event.</p>
</li>
<li><p><code>showWeeks</code>
<small class="badge">C</small>
<em>(Default: <code>true</code>)</em> -
Whether to display week numbers.</p>
</li>
<li><p><code>startingDay</code>
<small class="badge">C</small>
<em>(Default: <code>$locale.DATETIME_FORMATS.FIRSTDAYOFWEEK</code>)</em> -
Starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday).</p>
</li>
<li><p><code>yearRows</code>
<small class="badge">C</small>
<em>(Default: <code>4</code>)</em> -
Number of rows displayed in year selection.</p>
</li>
<li><p><code>yearColumns</code>
<small class="badge">C</small>
<em>(Default: <code>5</code>)</em> -
Number of columns displayed in year selection.</p>
</li>
</ul>
</li>
</ul>
<h3 id="uib-datepicker-popup-settings">uib-datepicker-popup settings</h3>
<p>The popup is a wrapper that you can use in an input to toggle a datepicker. To configure the datepicker, use <code>datepicker-options</code>.</p>
<ul>
<li><p><code>alt-input-formats</code>
<small class="badge">$</small>
<small class="badge">C</small>
<em>(Default: <code>[]</code>)</em> -
A list of alternate formats acceptable for manual entry.</p>
</li>
<li><p><code>clear-text</code>
<small class="badge">C</small>
<em>(Default: <code>Clear</code>)</em> -
The text to display for the clear button.</p>
</li>
<li><p><code>close-on-date-selection</code>
<small class="badge">$</small>
<small class="badge">C</small>
<em>(Default: <code>true</code>)</em> -
Whether to close calendar when a date is chosen.</p>
</li>
<li><p><code>close-text</code>
<small class="badge">C</small>
<em>(Default: <code>Done</code>)</em> -
The text to display for the close button.</p>
</li>
<li><p><code>current-text</code>
<small class="badge">C</small>
<em>(Default: <code>Today</code>)</em> -
The text to display for the current day button.</p>
</li>
<li><p><code>datepicker-append-to-body</code>
<small class="badge">$</small>
<small class="badge">C</small>
<em>(Default: <code>false</code>, Config: <code>appendToBody</code>)</em> -
Append the datepicker popup element to <code>body</code>, rather than inserting after <code>datepicker-popup</code>.</p>
</li>
<li><p><code>datepicker-options</code>
<small class="badge">$</small> -
An object with any combination of the datepicker settings (in camelCase) used to configure the wrapped datepicker.</p>
</li>
<li><p><code>datepicker-popup-template-url</code>
<small class="badge">C</small>
<em>(Default: <code>uib/template/datepicker/popup.html</code>)</em> -
Add the ability to override the template used on the component.</p>
</li>
<li><p><code>datepicker-template-url</code>
<small class="badge">C</small>
<em>(Default: <code>uib/template/datepicker/datepicker.html</code>)</em> -
Add the ability to override the template used on the component (inner uib-datepicker).</p>
</li>
<li><p><code>is-open</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>false</code>)</em> -
Whether or not to show the datepicker.</p>
</li>
<li><p><code>on-open-focus</code>
<small class="badge">$</small>
<small class="badge">C</small>
<em>(Default: <code>true</code>)</em> -
Whether or not to focus the datepicker popup upon opening.</p>
</li>
<li><p><code>show-button-bar</code>
<small class="badge">$</small>
<small class="badge">C</small>
<em>(Default: <code>true</code>)</em> -
Whether or not to display a button bar underneath the uib-datepicker.</p>
</li>
<li><p><code>type</code>
<small class="badge">C</small>
<em>(Default: <code>text</code>, Config: <code>html5Types</code>)</em> -
You can override the input type to be <em>(date|datetime-local|month)</em>. That will change the date format of the popup.</p>
</li>
<li><p><code>popup-placement</code>
 <small class="badge">C</small>
 <em>(Default: <code>auto bottom-left</code>, Config: 'placement')</em> -
Passing in 'auto' separated by a space before the placement will enable auto positioning, e.g: "auto bottom-left". The popup will attempt to position where it fits in the closest scrollable ancestor. Accepts:</p>
<ul>
<li><code>top</code> - popup on top, horizontally centered on input element.</li>
<li><code>top-left</code> - popup on top, left edge aligned with input element left edge.</li>
<li><code>top-right</code> - popup on top, right edge aligned with input element right edge.</li>
<li><code>bottom</code> - popup on bottom, horizontally centered on input element.</li>
<li><code>bottom-left</code> - popup on bottom, left edge aligned with input element left edge.</li>
<li><code>bottom-right</code> - popup on bottom, right edge aligned with input element right edge.</li>
<li><code>left</code> - popup on left, vertically centered on input element.</li>
<li><code>left-top</code> - popup on left, top edge aligned with input element top edge.</li>
<li><code>left-bottom</code> - popup on left, bottom edge aligned with input element bottom edge.</li>
<li><code>right</code> - popup on right, vertically centered on input element.</li>
<li><code>right-top</code> - popup on right, top edge aligned with input element top edge.</li>
<li><code>right-bottom</code> - popup on right, bottom edge aligned with input element bottom edge.</li>
</ul>
</li>
<li><p><code>uib-datepicker-popup</code>
<small class="badge">C</small>
<em>(Default: <code>yyyy-MM-dd</code>, Config: <code>datepickerConfig</code>)</em> -
The format for displayed dates. This string can take string literals by surrounding the value with single quotes, i.e. <code>yyyy-MM-dd h 'o\'clock'</code>.</p>
</li>
</ul>
<h3 id="keyboard-support">Keyboard support</h3>
<p>Depending on datepicker's current mode, the date may refer either to day, month or year. Accordingly, the term view refers either to a month, year or year range.</p>
<ul>
<li><code>Left</code>: Move focus to the previous date. Will move to the last date of the previous view, if the current date is the first date of a view.</li>
<li><code>Right</code>: Move focus to the next date. Will move to the first date of the following view, if the current date is the last date of a view.</li>
<li><code>Up</code>: Move focus to the same column of the previous row. Will wrap to the appropriate row in the previous view.</li>
<li><code>Down</code>: Move focus to the same column of the following row. Will wrap to the appropriate row in the following view.</li>
<li><code>PgUp</code>: Move focus to the same date of the previous view. If that date does not exist, focus is placed on the last date of the month.</li>
<li><code>PgDn</code>: Move focus to the same date of the following view. If that date does not exist, focus is placed on the last date of the month.</li>
<li><code>Home</code>: Move to the first date of the view.</li>
<li><code>End</code>: Move to the last date of the view.</li>
<li><code>Enter</code>/<code>Space</code>: Select date.</li>
<li><code>Ctrl</code>+<code>Up</code>: Move to an upper mode.</li>
<li><code>Ctrl</code>+<code>Down</code>: Move to a lower mode.</li>
<li><code>Esc</code>: Will close popup, and move focus to the input.</li>
</ul>
<p><strong>Notes</strong></p>
<p>If the date a user enters falls outside of the min-/max-date range, a <code>dateDisabled</code> validation error will show on the form.</p>
<p>If using this directive on input type date, a native browser datepicker could also appear.</p>

                            </div>
                        </div>
                        <hr>
                        <div class="row code">
                            <div class="col-md-12" ng-controller="PlunkerCtrl">
                                <div class="pull-right">
                                    <button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.5.0', '3.3.6', '1.2.5', 'datepicker')"><i class="glyphicon glyphicon-edit"></i> Edit in plunker</button>
                                </div>
                                <uib-tabset active="activeTab">
                                    <uib-tab index="0" heading="Markup">
                                        <div plunker-content="markup">
                                            <pre ng-non-bindable=""><code data-language="html" class="rainbow"><span class="source css embedded"><span class="keyword operator">&lt;</span>style<span class="keyword operator">&gt;</span>
  .full button span {
    background<span class="keyword operator">-</span>color: limegreen;
    border<span class="keyword operator">-</span>radius: 32px;
    color: black;
  }
  .partially button span {
    background<span class="keyword operator">-</span>color: orange;
    border<span class="keyword operator">-</span>radius: 32px;
    color: black;
  }
<span class="keyword operator">&lt;</span>/style<span class="keyword operator">&gt;</span></span>
<span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">ng-controller</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">DatepickerDemoCtrl</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">pre</span></span><span class="support tag cclose">&gt;</span>Selected date is: <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">em</span></span><span class="support tag cclose">&gt;</span>{{dt | date:'fullDate' }}<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">em</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">pre</span></span><span class="support tag cclose">&gt;</span>

    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>Inline<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">style</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">display:inline-block; min-height:290px;</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-datepicker <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">dt</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">well well-sm</span><span class="string quote">"</span> <span class="support attribute">datepicker-options</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">inlineOptions</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-datepicker<span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>

    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>Popup<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">row</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">col-md-6</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">p</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">input-group</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
          <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">input</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">text</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-control</span><span class="string quote">"</span> <span class="support attribute">uib-datepicker-popup</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">{{format}}</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">dt</span><span class="string quote">"</span> <span class="support attribute">is-open</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">popup1.opened</span><span class="string quote">"</span> <span class="support attribute">datepicker-options</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">dateOptions</span><span class="string quote">"</span> <span class="support attribute">ng-required</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">true</span><span class="string quote">"</span> <span class="support attribute">close-text</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">Close</span><span class="string quote">"</span> <span class="support attribute">alt-input-formats</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">altInputFormats</span><span class="string quote">"</span> <span class="support tag cclose">/&gt;</span>
          <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">span</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">input-group-btn</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
            <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-default</span><span class="string quote">"</span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">open1()</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">i</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">glyphicon glyphicon-calendar</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">i</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
          <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">span</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">p</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>

      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">col-md-6</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">p</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">input-group</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
          <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">input</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">text</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-control</span><span class="string quote">"</span> uib-datepicker-popup <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">dt</span><span class="string quote">"</span> <span class="support attribute">is-open</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">popup2.opened</span><span class="string quote">"</span> <span class="support attribute">datepicker-options</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">dateOptions</span><span class="string quote">"</span> <span class="support attribute">ng-required</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">true</span><span class="string quote">"</span> <span class="support attribute">close-text</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">Close</span><span class="string quote">"</span> <span class="support tag cclose">/&gt;</span>
          <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">span</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">input-group-btn</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
            <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-default</span><span class="string quote">"</span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">open2()</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">i</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">glyphicon glyphicon-calendar</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">i</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
          <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">span</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">p</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">row</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">col-md-6</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>Format: <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">span</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">muted-text</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>(manual alternate <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">em</span></span><span class="support tag cclose">&gt;</span>{{altInputFormats[0]}}<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">em</span></span><span class="support tag cclose">&gt;</span>)<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">span</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span> <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">select</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-control</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">format</span><span class="string quote">"</span> <span class="support attribute">ng-options</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">f for f in formats</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">option</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">option</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">select</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>

    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">hr</span></span> <span class="support tag cclose">/&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-sm btn-info</span><span class="string quote">"</span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">today()</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Today<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-sm btn-default</span><span class="string quote">"</span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">setDate(2009, 7, 24)</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>2009-08-24<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-sm btn-danger</span><span class="string quote">"</span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">clear()</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Clear<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-sm btn-default</span><span class="string quote">"</span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">toggleMin()</span><span class="string quote">"</span> <span class="support attribute">uib-tooltip</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">After today restriction</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Min date<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
</code></pre>
                                        </div>
                                    </uib-tab>
                                    <uib-tab index="1" heading="JavaScript">
                                        <div plunker-content="javascript">
                                            <pre ng-non-bindable=""><code data-language="javascript" class="rainbow">angular.<span class="function call">module</span>(<span class="string">'ui.bootstrap.demo'</span>).<span class="function call">controller</span>(<span class="string">'DatepickerDemoCtrl'</span>, <span class="storage function">function</span> ($scope) {
<span class="entity function">  $scope.today </span><span class="keyword operator">=</span> <span class="keyword">function</span>() {
    $scope.dt <span class="keyword operator">=</span> <span class="keyword">new</span> <span class="entity function">Date</span>();
  };
  $scope.<span class="function call">today</span>();

<span class="entity function">  $scope.clear </span><span class="keyword operator">=</span> <span class="keyword">function</span>() {
    $scope.dt <span class="keyword operator">=</span> <span class="constant language">null</span>;
  };

  $scope.inlineOptions <span class="keyword operator">=</span> {
    customClass: getDayClass,
    minDate: <span class="keyword">new</span> <span class="entity function">Date</span>(),
    showWeeks: <span class="constant language">true</span>
  };

  $scope.dateOptions <span class="keyword operator">=</span> {
    dateDisabled: disabled,
    formatYear: <span class="string">'yy'</span>,
    maxDate: <span class="keyword">new</span> <span class="entity function">Date</span>(<span class="constant numeric">2020</span>, <span class="constant numeric">5</span>, <span class="constant numeric">22</span>),
    minDate: <span class="keyword">new</span> <span class="entity function">Date</span>(),
    startingDay: <span class="constant numeric">1</span>
  };

  <span class="comment">// Disable weekend selection</span>
  <span class="storage function">function</span> <span class="entity name function">disabled</span>(data) {
    <span class="keyword">var</span> date <span class="keyword operator">=</span> data.date,
      mode <span class="keyword operator">=</span> data.mode;
    <span class="keyword">return</span> mode <span class="keyword operator">=</span><span class="keyword operator">=</span><span class="keyword operator">=</span> <span class="string">'day'</span> <span class="keyword operator">&amp;</span><span class="keyword operator">&amp;</span> (date.<span class="function call">getDay</span>() <span class="keyword operator">=</span><span class="keyword operator">=</span><span class="keyword operator">=</span> <span class="constant numeric">0</span> <span class="keyword operator">|</span><span class="keyword operator">|</span> date.<span class="function call">getDay</span>() <span class="keyword operator">=</span><span class="keyword operator">=</span><span class="keyword operator">=</span> <span class="constant numeric">6</span>);
  }

<span class="entity function">  $scope.toggleMin </span><span class="keyword operator">=</span> <span class="keyword">function</span>() {
    $scope.inlineOptions.minDate <span class="keyword operator">=</span> $scope.inlineOptions.minDate ? <span class="constant language">null</span> : <span class="keyword">new</span> <span class="entity function">Date</span>();
    $scope.dateOptions.minDate <span class="keyword operator">=</span> $scope.inlineOptions.minDate;
  };

  $scope.<span class="function call">toggleMin</span>();

<span class="entity function">  $scope.open1 </span><span class="keyword operator">=</span> <span class="keyword">function</span>() {
    $scope.popup1.opened <span class="keyword operator">=</span> <span class="constant language">true</span>;
  };

<span class="entity function">  $scope.open2 </span><span class="keyword operator">=</span> <span class="keyword">function</span>() {
    $scope.popup2.opened <span class="keyword operator">=</span> <span class="constant language">true</span>;
  };

<span class="entity function">  $scope.setDate </span><span class="keyword operator">=</span> <span class="keyword">function</span>(year, month, day) {
    $scope.dt <span class="keyword operator">=</span> <span class="keyword">new</span> <span class="entity function">Date</span>(year, month, day);
  };

  $scope.formats <span class="keyword operator">=</span> [<span class="string">'dd-MMMM-yyyy'</span>, <span class="string">'yyyy/MM/dd'</span>, <span class="string">'dd.MM.yyyy'</span>, <span class="string">'shortDate'</span>];
  $scope.format <span class="keyword operator">=</span> $scope.formats[<span class="constant numeric">0</span>];
  $scope.altInputFormats <span class="keyword operator">=</span> [<span class="string">'M!/d!/yyyy'</span>];

  $scope.popup1 <span class="keyword operator">=</span> {
    opened: <span class="constant language">false</span>
  };

  $scope.popup2 <span class="keyword operator">=</span> {
    opened: <span class="constant language">false</span>
  };

  <span class="keyword">var</span> tomorrow <span class="keyword operator">=</span> <span class="keyword">new</span> <span class="entity function">Date</span>();
  tomorrow.<span class="function call">setDate</span>(tomorrow.<span class="function call">getDate</span>() <span class="keyword operator">+</span> <span class="constant numeric">1</span>);
  <span class="keyword">var</span> afterTomorrow <span class="keyword operator">=</span> <span class="keyword">new</span> <span class="entity function">Date</span>();
  afterTomorrow.<span class="function call">setDate</span>(tomorrow.<span class="function call">getDate</span>() <span class="keyword operator">+</span> <span class="constant numeric">1</span>);
  $scope.events <span class="keyword operator">=</span> [
    {
      date: tomorrow,
      status: <span class="string">'full'</span>
    },
    {
      date: afterTomorrow,
      status: <span class="string">'partially'</span>
    }
  ];

  <span class="storage function">function</span> <span class="entity name function">getDayClass</span>(data) {
    <span class="keyword">var</span> date <span class="keyword operator">=</span> data.date,
      mode <span class="keyword operator">=</span> data.mode;
    <span class="keyword">if</span> (mode <span class="keyword operator">=</span><span class="keyword operator">=</span><span class="keyword operator">=</span> <span class="string">'day'</span>) {
      <span class="keyword">var</span> dayToCheck <span class="keyword operator">=</span> <span class="keyword">new</span> <span class="entity function">Date(date).setHours</span>(<span class="constant numeric">0</span>,<span class="constant numeric">0</span>,<span class="constant numeric">0</span>,<span class="constant numeric">0</span>);

      <span class="keyword">for</span> (<span class="keyword">var</span> i <span class="keyword operator">=</span> <span class="constant numeric">0</span>; i <span class="keyword operator">&lt;</span> $scope.events.<span class="support property">length</span>; i<span class="keyword operator">+</span><span class="keyword operator">+</span>) {
        <span class="keyword">var</span> currentDay <span class="keyword operator">=</span> <span class="keyword">new</span> <span class="entity function">Date($scope.events[i].date).setHours</span>(<span class="constant numeric">0</span>,<span class="constant numeric">0</span>,<span class="constant numeric">0</span>,<span class="constant numeric">0</span>);

        <span class="keyword">if</span> (dayToCheck <span class="keyword operator">=</span><span class="keyword operator">=</span><span class="keyword operator">=</span> currentDay) {
          <span class="keyword">return</span> $scope.events[i].status;
        }
      }
    }

    <span class="keyword">return</span> <span class="string">''</span>;
  }
});
</code></pre>
                                        </div>
                                    </uib-tab>
                                </uib-tabset>
                            </div>
                        </div>
                    </section>
                    <script>angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {
  $scope.today = function() {
    $scope.dt = new Date();
  };
  $scope.today();

  $scope.clear = function() {
    $scope.dt = null;
  };

  $scope.inlineOptions = {
    customClass: getDayClass,
    minDate: new Date(),
    showWeeks: true
  };

  $scope.dateOptions = {
    dateDisabled: disabled,
    formatYear: 'yy',
    maxDate: new Date(2020, 5, 22),
    minDate: new Date(),
    startingDay: 1
  };

  // Disable weekend selection
  function disabled(data) {
    var date = data.date,
      mode = data.mode;
    return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
  }

  $scope.toggleMin = function() {
    $scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date();
    $scope.dateOptions.minDate = $scope.inlineOptions.minDate;
  };

  $scope.toggleMin();

  $scope.open1 = function() {
    $scope.popup1.opened = true;
  };

  $scope.open2 = function() {
    $scope.popup2.opened = true;
  };

  $scope.setDate = function(year, month, day) {
    $scope.dt = new Date(year, month, day);
  };

  $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
  $scope.format = $scope.formats[0];
  $scope.altInputFormats = ['M!/d!/yyyy'];

  $scope.popup1 = {
    opened: false
  };

  $scope.popup2 = {
    opened: false
  };

  var tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);
  var afterTomorrow = new Date();
  afterTomorrow.setDate(tomorrow.getDate() + 1);
  $scope.events = [
    {
      date: tomorrow,
      status: 'full'
    },
    {
      date: afterTomorrow,
      status: 'partially'
    }
  ];

  function getDayClass(data) {
    var date = data.date,
      mode = data.mode;
    if (mode === 'day') {
      var dayToCheck = new Date(date).setHours(0,0,0,0);

      for (var i = 0; i < $scope.events.length; i++) {
        var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);

        if (dayToCheck === currentDay) {
          return $scope.events[i].status;
        }
      }
    }

    return '';
  }
});
</script>
                
                    <section id="dropdown">
                        <div class="page-header">
                          <h1>Dropdown<small>
                              (<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/dropdown">ui.bootstrap.dropdown</a>)
                          </small></h1>
                          </div>
                          <div class="row">
                            <div class="col-md-6 show-grid">
                                
<div ng-controller="DropdownCtrl">
    <!-- Simple dropdown -->
    <span uib-dropdown="" on-toggle="toggled(open)">
      <a href="" id="simple-dropdown" uib-dropdown-toggle="">
        Click me for a dropdown, yo!
      </a>
      <ul uib-dropdown-menu="" aria-labelledby="simple-dropdown">
        <li ng-repeat="choice in items">
          <a href="">{{choice}}</a>
        </li>
      </ul>
    </span>

    <!-- Single button -->
    <div class="btn-group" uib-dropdown="" is-open="status.isopen">
      <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle="" ng-disabled="disabled">
        Button dropdown <span class="caret"></span>
      </button>
      <ul uib-dropdown-menu="" role="menu" aria-labelledby="single-button">
        <li role="menuitem"><a href="#">Action</a></li>
        <li role="menuitem"><a href="#">Another action</a></li>
        <li role="menuitem"><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li role="menuitem"><a href="#">Separated link</a></li>
      </ul>
    </div>

    <!-- Split button -->
    <div class="btn-group" uib-dropdown="">
      <button id="split-button" type="button" class="btn btn-danger">Action</button>
      <button type="button" class="btn btn-danger" uib-dropdown-toggle="">
        <span class="caret"></span>
        <span class="sr-only">Split button!</span>
      </button>
      <ul uib-dropdown-menu="" role="menu" aria-labelledby="split-button">
        <li role="menuitem"><a href="#">Action</a></li>
        <li role="menuitem"><a href="#">Another action</a></li>
        <li role="menuitem"><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li role="menuitem"><a href="#">Separated link</a></li>
      </ul>
    </div>

    <!-- Single button using append-to-body -->
    <div class="btn-group" uib-dropdown="" dropdown-append-to-body="">
      <button id="btn-append-to-body" type="button" class="btn btn-primary" uib-dropdown-toggle="">
        Dropdown on Body <span class="caret"></span>
      </button>
      <ul uib-dropdown-menu="" role="menu" aria-labelledby="btn-append-to-body">
        <li role="menuitem"><a href="#">Action</a></li>
        <li role="menuitem"><a href="#">Another action</a></li>
        <li role="menuitem"><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li role="menuitem"><a href="#">Separated link</a></li>
      </ul>
    </div>

    <!-- Single button using template-url -->
    <div class="btn-group" uib-dropdown="">
      <button id="button-template-url" type="button" class="btn btn-primary" uib-dropdown-toggle="" ng-disabled="disabled">
        Dropdown using template <span class="caret"></span>
      </button>
      <ul uib-dropdown-menu="" template-url="dropdown.html" aria-labelledby="button-template-url">
      </ul>
    </div>

    <hr>
    <p>
        <button type="button" class="btn btn-default btn-sm" ng-click="toggleDropdown($event)">Toggle button dropdown</button>
        <button type="button" class="btn btn-warning btn-sm" ng-click="disabled = !disabled">Enable/Disable</button>
    </p>

    <hr>
    <!-- Single button with keyboard nav -->
    <div class="btn-group" uib-dropdown="" keyboard-nav="">
        <button id="simple-btn-keyboard-nav" type="button" class="btn btn-primary" uib-dropdown-toggle="">
            Dropdown with keyboard navigation <span class="caret"></span>
        </button>
        <ul uib-dropdown-menu="" role="menu" aria-labelledby="simple-btn-keyboard-nav">
            <li role="menuitem"><a href="#">Action</a></li>
            <li role="menuitem"><a href="#">Another action</a></li>
            <li role="menuitem"><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li role="menuitem"><a href="#">Separated link</a></li>
        </ul>
    </div>

    <hr>
    <!-- AppendTo use case -->
    <h4>append-to vs. append-to-body vs. inline example</h4>
    <div id="dropdown-scrollable-container" style="height: 15em; overflow: auto;">
      <div id="dropdown-long-content">
        <div id="dropdown-hidden-container">
          <div class="btn-group" uib-dropdown="" keyboard-nav="" dropdown-append-to="appendToEl">
            <button id="btn-append-to" type="button" class="btn btn-primary" uib-dropdown-toggle="">
              Dropdown in Container <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" uib-dropdown-menu="" role="menu" aria-labelledby="btn-append-to">
              <li role="menuitem"><a href="#">Action</a></li>
              <li role="menuitem"><a href="#">Another action</a></li>
              <li role="menuitem"><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li role="menuitem"><a href="#">Separated link</a></li>
            </ul>
          </div>
          <div class="btn-group" uib-dropdown="" dropdown-append-to-body="">
            <button id="btn-append-to-to-body" type="button" class="btn btn-primary" uib-dropdown-toggle="">
              Dropdown on Body <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" uib-dropdown-menu="" role="menu" aria-labelledby="btn-append-to-to-body">
              <li role="menuitem"><a href="#">Action</a></li>
              <li role="menuitem"><a href="#">Another action</a></li>
              <li role="menuitem"><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li role="menuitem"><a href="#">Separated link</a></li>
            </ul>
          </div>
          <div class="btn-group" uib-dropdown="">
            <button id="btn-append-to-single-button" type="button" class="btn btn-primary" uib-dropdown-toggle="">
              Inline Dropdown <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" uib-dropdown-menu="" role="menu" aria-labelledby="btn-append-to-single-button">
              <li role="menuitem"><a href="#">Action</a></li>
              <li role="menuitem"><a href="#">Another action</a></li>
              <li role="menuitem"><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li role="menuitem"><a href="#">Separated link</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <script type="text/ng-template" id="dropdown.html">
        <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="button-template-url">
          <li role="menuitem"><a href="#">Action in Template</a></li>
          <li role="menuitem"><a href="#">Another action in Template</a></li>
          <li role="menuitem"><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li role="menuitem"><a href="#">Separated link in Template</a></li>
        </ul>
    </script>
</div>

                            </div>
                            <div class="col-md-6">
                                <p>Dropdown is a simple directive which will toggle a dropdown menu on click or programmatically.</p>
<p>This directive is composed by three parts:</p>
<ul>
<li><code>uib-dropdown</code> which transforms a node into a dropdown.</li>
<li><code>uib-dropdown-toggle</code> which allows the dropdown to be toggled via click. This directive is optional.</li>
<li><code>uib-dropdown-menu</code> which transforms a node into the popup menu.</li>
</ul>
<p>Each of these parts need to be used as attribute directives.</p>
<h3 id="uib-dropdown-settings">uib-dropdown settings</h3>
<ul>
<li><p><code>auto-close</code>
<em>(Default: <code>always</code>)</em> -
Controls the behavior of the menu when clicked.</p>
<ul>
<li><code>always</code> - Automatically closes the dropdown when any of its elements is clicked.</li>
<li><code>disabled</code> - Disables the auto close. You can control it manually with <code>is-open</code>. It still gets closed if the toggle is clicked, <code>esc</code> is pressed or another dropdown is open. It also won't be closed on <code>$locationchangeSuccess</code>.</li>
<li><code>outsideClick</code> - Closes the dropdown automatically only when the user clicks any element outside the dropdown.</li>
</ul>
</li>
<li><p><code>dropdown-append-to</code>
<small class="badge">$</small>
<em>(Default: <code>null</code>)</em> -
Appends the inner dropdown-menu to an arbitrary DOM element.</p>
</li>
<li><p><code>dropdown-append-to-body</code>
<small class="badge">B</small>
<em>(Default: <code>false</code>)</em> -
Appends the inner dropdown-menu to the body element.</p>
</li>
<li><p><code>is-open</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>false</code>)</em> -
Defines whether or not the dropdown-menu is open. The <code>uib-dropdown-toggle</code> will toggle this attribute on click.</p>
</li>
<li><p><code>keyboard-nav</code>:
<small class="badge">B</small>
<em>(Default: <code>false</code>)</em> -
Enables navigation of dropdown list elements with the arrow keys.</p>
</li>
<li><p><code>on-toggle(open)</code>
<small class="badge">$</small> -
An optional expression called when the dropdown menu is opened or closed.</p>
</li>
</ul>
<h3 id="uib-dropdown-menu-settings">uib-dropdown-menu settings</h3>
<ul>
<li><code>template-url</code>
<em>(Default: <code>none</code>)</em> -
You may specify a template for the dropdown menu. Check the demos for an example.</li>
</ul>
<h3 id="additional-settings-uibdropdownconfig-">Additional settings <code>uibDropdownConfig</code></h3>
<ul>
<li><p><code>appendToOpenClass</code>
<em>(Default: <code>uib-dropdown-open</code>)</em> -
Class to apply when the dropdown is open and appended to a different DOM element.</p>
</li>
<li><p><code>openClass</code>
<em>(Default: <code>open</code>)</em> -
Class to apply when the dropdown is open.</p>
</li>
</ul>
<h3 id="known-issues">Known issues</h3>
<p>For usage with ngTouch, it is recommended to use the programmatic <code>is-open</code> trigger with ng-click - this is due to ngTouch decorating ng-click to prevent propagation of the event.</p>

                            </div>
                        </div>
                        <hr>
                        <div class="row code">
                            <div class="col-md-12" ng-controller="PlunkerCtrl">
                                <div class="pull-right">
                                    <button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.5.0', '3.3.6', '1.2.5', 'dropdown')"><i class="glyphicon glyphicon-edit"></i> Edit in plunker</button>
                                </div>
                                <uib-tabset active="activeTab">
                                    <uib-tab index="0" heading="Markup">
                                        <div plunker-content="markup">
                                            <pre ng-non-bindable=""><code data-language="html" class="rainbow">
<span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">ng-controller</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">DropdownCtrl</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
    <span class="comment html">&lt;!-- Simple dropdown --&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">span</span></span> uib-dropdown <span class="support attribute">on-toggle</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">toggled(open)</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> href <span class="support attribute">id</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">simple-dropdown</span><span class="string quote">"</span> uib-dropdown-toggle<span class="support tag cclose">&gt;</span>
        Click me for a dropdown, yo!
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">ul</span></span> uib-dropdown-menu <span class="support attribute">aria-labelledby</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">simple-dropdown</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">ng-repeat</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">choice in items</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
          <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> href<span class="support tag cclose">&gt;</span>{{choice}}<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">ul</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">span</span></span><span class="support tag cclose">&gt;</span>

    <span class="comment html">&lt;!-- Single button --&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn-group</span><span class="string quote">"</span> uib-dropdown <span class="support attribute">is-open</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">status.isopen</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">id</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">single-button</span><span class="string quote">"</span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-primary</span><span class="string quote">"</span> uib-dropdown-toggle <span class="support attribute">ng-disabled</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">disabled</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
        Button dropdown <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">span</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">caret</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">span</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">ul</span></span> uib-dropdown-menu <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menu</span><span class="string quote">"</span> <span class="support attribute">aria-labelledby</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">single-button</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menuitem</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Action<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menuitem</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Another action<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menuitem</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Something else here<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">divider</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menuitem</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Separated link<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">ul</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>

    <span class="comment html">&lt;!-- Split button --&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn-group</span><span class="string quote">"</span> uib-dropdown<span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">id</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">split-button</span><span class="string quote">"</span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-danger</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Action<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-danger</span><span class="string quote">"</span> uib-dropdown-toggle<span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">span</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">caret</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">span</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">span</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">sr-only</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Split button!<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">span</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">ul</span></span> uib-dropdown-menu <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menu</span><span class="string quote">"</span> <span class="support attribute">aria-labelledby</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">split-button</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menuitem</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Action<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menuitem</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Another action<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menuitem</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Something else here<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">divider</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menuitem</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Separated link<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">ul</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>

    <span class="comment html">&lt;!-- Single button using append-to-body --&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn-group</span><span class="string quote">"</span> uib-dropdown dropdown-append-to-body<span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">id</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn-append-to-body</span><span class="string quote">"</span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-primary</span><span class="string quote">"</span> uib-dropdown-toggle<span class="support tag cclose">&gt;</span>
        Dropdown on Body <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">span</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">caret</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">span</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">ul</span></span> uib-dropdown-menu <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menu</span><span class="string quote">"</span> <span class="support attribute">aria-labelledby</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn-append-to-body</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menuitem</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Action<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menuitem</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Another action<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menuitem</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Something else here<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">divider</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menuitem</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Separated link<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">ul</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>

    <span class="comment html">&lt;!-- Single button using template-url --&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn-group</span><span class="string quote">"</span> uib-dropdown<span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">id</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button-template-url</span><span class="string quote">"</span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-primary</span><span class="string quote">"</span> uib-dropdown-toggle <span class="support attribute">ng-disabled</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">disabled</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
        Dropdown using template <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">span</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">caret</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">span</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">ul</span></span> uib-dropdown-menu <span class="support attribute">template-url</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">dropdown.html</span><span class="string quote">"</span> <span class="support attribute">aria-labelledby</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button-template-url</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">ul</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>

    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">hr</span></span> <span class="support tag cclose">/&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">p</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-default btn-sm</span><span class="string quote">"</span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">toggleDropdown($event)</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Toggle button dropdown<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-warning btn-sm</span><span class="string quote">"</span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">disabled = !disabled</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Enable/Disable<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">p</span></span><span class="support tag cclose">&gt;</span>

    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">hr</span></span><span class="support tag cclose">&gt;</span>
    <span class="comment html">&lt;!-- Single button with keyboard nav --&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn-group</span><span class="string quote">"</span> uib-dropdown keyboard-nav<span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">id</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">simple-btn-keyboard-nav</span><span class="string quote">"</span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-primary</span><span class="string quote">"</span> uib-dropdown-toggle<span class="support tag cclose">&gt;</span>
            Dropdown with keyboard navigation <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">span</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">caret</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">span</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">ul</span></span> uib-dropdown-menu <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menu</span><span class="string quote">"</span> <span class="support attribute">aria-labelledby</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">simple-btn-keyboard-nav</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
            <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menuitem</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Action<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
            <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menuitem</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Another action<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
            <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menuitem</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Something else here<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
            <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">divider</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
            <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menuitem</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Separated link<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">ul</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>

    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">hr</span></span><span class="support tag cclose">&gt;</span>
    <span class="comment html">&lt;!-- AppendTo use case --&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>append-to vs. append-to-body vs. inline example<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">id</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">dropdown-scrollable-container</span><span class="string quote">"</span> <span class="support attribute">style</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">height: 15em; overflow: auto;</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">id</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">dropdown-long-content</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">id</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">dropdown-hidden-container</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
          <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn-group</span><span class="string quote">"</span> uib-dropdown keyboard-nav <span class="support attribute">dropdown-append-to</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">appendToEl</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
            <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">id</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn-append-to</span><span class="string quote">"</span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-primary</span><span class="string quote">"</span> uib-dropdown-toggle<span class="support tag cclose">&gt;</span>
              Dropdown in Container <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">span</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">caret</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">span</span></span><span class="support tag cclose">&gt;</span>
            <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
            <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">ul</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">dropdown-menu</span><span class="string quote">"</span> uib-dropdown-menu <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menu</span><span class="string quote">"</span> <span class="support attribute">aria-labelledby</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn-append-to</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
              <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menuitem</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Action<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
              <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menuitem</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Another action<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
              <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menuitem</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Something else here<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
              <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">divider</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
              <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menuitem</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Separated link<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
            <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">ul</span></span><span class="support tag cclose">&gt;</span>
          <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
          <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn-group</span><span class="string quote">"</span> uib-dropdown dropdown-append-to-body<span class="support tag cclose">&gt;</span>
            <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">id</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn-append-to-to-body</span><span class="string quote">"</span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-primary</span><span class="string quote">"</span> uib-dropdown-toggle<span class="support tag cclose">&gt;</span>
              Dropdown on Body <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">span</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">caret</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">span</span></span><span class="support tag cclose">&gt;</span>
            <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
            <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">ul</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">dropdown-menu</span><span class="string quote">"</span> uib-dropdown-menu <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menu</span><span class="string quote">"</span> <span class="support attribute">aria-labelledby</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn-append-to-to-body</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
              <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menuitem</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Action<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
              <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menuitem</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Another action<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
              <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menuitem</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Something else here<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
              <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">divider</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
              <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menuitem</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Separated link<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
            <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">ul</span></span><span class="support tag cclose">&gt;</span>
          <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
          <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn-group</span><span class="string quote">"</span> uib-dropdown<span class="support tag cclose">&gt;</span>
            <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">id</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn-append-to-single-button</span><span class="string quote">"</span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-primary</span><span class="string quote">"</span> uib-dropdown-toggle<span class="support tag cclose">&gt;</span>
              Inline Dropdown <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">span</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">caret</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">span</span></span><span class="support tag cclose">&gt;</span>
            <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
            <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">ul</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">dropdown-menu</span><span class="string quote">"</span> uib-dropdown-menu <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menu</span><span class="string quote">"</span> <span class="support attribute">aria-labelledby</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn-append-to-single-button</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
              <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menuitem</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Action<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
              <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menuitem</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Another action<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
              <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menuitem</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Something else here<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
              <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">divider</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
              <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">li</span></span> <span class="support attribute">role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">menuitem</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Separated link<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">li</span></span><span class="support tag cclose">&gt;</span>
            <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">ul</span></span><span class="support tag cclose">&gt;</span>
          <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>

    <span class="source js embedded"><span class="support tag script">&lt;</span><span class="entity tag script">script</span> <span class="entity tag script">type</span>=<span class="string">"text/ng-template"</span> <span class="entity tag script">id</span>=<span class="string">"dropdown.html"</span><span class="support tag script">&gt;</span>
        <span class="keyword operator">&lt;</span>ul <span class="keyword">class</span><span class="keyword operator">=</span><span class="string">"dropdown-menu"</span> uib<span class="keyword operator">-</span>dropdown<span class="keyword operator">-</span>menu role<span class="keyword operator">=</span><span class="string">"menu"</span> aria<span class="keyword operator">-</span>labelledby<span class="keyword operator">=</span><span class="string">"button-template-url"</span><span class="keyword operator">&gt;</span>
          <span class="keyword operator">&lt;</span>li role<span class="keyword operator">=</span><span class="string">"menuitem"</span><span class="keyword operator">&gt;</span><span class="keyword operator">&lt;</span>a href<span class="keyword operator">=</span><span class="string">"#"</span><span class="keyword operator">&gt;</span>Action in Template<span class="keyword operator">&lt;</span><span class="string regexp"><span class="string regexp open">/</span>a&gt;&lt;<span class="string regexp cclose">/</span></span>li<span class="keyword operator">&gt;</span>
          <span class="keyword operator">&lt;</span>li role<span class="keyword operator">=</span><span class="string">"menuitem"</span><span class="keyword operator">&gt;</span><span class="keyword operator">&lt;</span>a href<span class="keyword operator">=</span><span class="string">"#"</span><span class="keyword operator">&gt;</span>Another action in Template<span class="keyword operator">&lt;</span><span class="string regexp"><span class="string regexp open">/</span>a&gt;&lt;<span class="string regexp cclose">/</span></span>li<span class="keyword operator">&gt;</span>
          <span class="keyword operator">&lt;</span>li role<span class="keyword operator">=</span><span class="string">"menuitem"</span><span class="keyword operator">&gt;</span><span class="keyword operator">&lt;</span>a href<span class="keyword operator">=</span><span class="string">"#"</span><span class="keyword operator">&gt;</span>Something <span class="keyword">else</span> here<span class="keyword operator">&lt;</span><span class="string regexp"><span class="string regexp open">/</span>a&gt;&lt;<span class="string regexp cclose">/</span></span>li<span class="keyword operator">&gt;</span>
          <span class="keyword operator">&lt;</span>li <span class="keyword">class</span><span class="keyword operator">=</span><span class="string">"divider"</span><span class="keyword operator">&gt;</span><span class="keyword operator">&lt;</span>/li<span class="keyword operator">&gt;</span>
          <span class="keyword operator">&lt;</span>li role<span class="keyword operator">=</span><span class="string">"menuitem"</span><span class="keyword operator">&gt;</span><span class="keyword operator">&lt;</span>a href<span class="keyword operator">=</span><span class="string">"#"</span><span class="keyword operator">&gt;</span>Separated link in Template<span class="keyword operator">&lt;</span><span class="string regexp"><span class="string regexp open">/</span>a&gt;&lt;<span class="string regexp cclose">/</span></span>li<span class="keyword operator">&gt;</span>
        <span class="keyword operator">&lt;</span>/ul<span class="keyword operator">&gt;</span>
    <span class="support tag script">&lt;/</span><span class="entity tag script">script</span><span class="support tag script">&gt;</span></span>
<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
</code></pre>
                                        </div>
                                    </uib-tab>
                                    <uib-tab index="1" heading="JavaScript">
                                        <div plunker-content="javascript">
                                            <pre ng-non-bindable=""><code data-language="javascript" class="rainbow">angular.<span class="function call">module</span>(<span class="string">'ui.bootstrap.demo'</span>).<span class="function call">controller</span>(<span class="string">'DropdownCtrl'</span>, <span class="storage function">function</span> ($scope, $log) {
  $scope.items <span class="keyword operator">=</span> [
    <span class="string">'The first choice!'</span>,
    <span class="string">'And another choice for you.'</span>,
    <span class="string">'but wait! A third!'</span>
  ];

  $scope.status <span class="keyword operator">=</span> {
    isopen: <span class="constant language">false</span>
  };

<span class="entity function">  $scope.toggled </span><span class="keyword operator">=</span> <span class="keyword">function</span>(open) {
    $log.<span class="support method">log</span>(<span class="string">'Dropdown is now: '</span>, open);
  };

<span class="entity function">  $scope.toggleDropdown </span><span class="keyword operator">=</span> <span class="keyword">function</span>($event) {
    $event.<span class="function call">preventDefault</span>();
    $event.<span class="function call">stopPropagation</span>();
    $scope.status.isopen <span class="keyword operator">=</span> <span class="keyword operator">!</span>$scope.status.isopen;
  };

  $scope.appendToEl <span class="keyword operator">=</span> angular.<span class="function call">element</span>(<span class="support">document</span>.<span class="function call">querySelector</span>(<span class="string">'#dropdown-long-content'</span>));
});
</code></pre>
                                        </div>
                                    </uib-tab>
                                </uib-tabset>
                            </div>
                        </div>
                    </section>
                    <script>angular.module('ui.bootstrap.demo').controller('DropdownCtrl', function ($scope, $log) {
  $scope.items = [
    'The first choice!',
    'And another choice for you.',
    'but wait! A third!'
  ];

  $scope.status = {
    isopen: false
  };

  $scope.toggled = function(open) {
    $log.log('Dropdown is now: ', open);
  };

  $scope.toggleDropdown = function($event) {
    $event.preventDefault();
    $event.stopPropagation();
    $scope.status.isopen = !$scope.status.isopen;
  };

  $scope.appendToEl = angular.element(document.querySelector('#dropdown-long-content'));
});
</script>
                
                    <section id="modal">
                        <div class="page-header">
                          <h1>Modal<small>
                              (<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/modal">ui.bootstrap.modal</a>)
                          </small></h1>
                          </div>
                          <div class="row">
                            <div class="col-md-6 show-grid">
                                <div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li ng-repeat="item in items">
                    <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
                </li>
            </ul>
            Selected: <b>{{ selected.item }}</b>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
        </div>
    </script>

    <button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
    <button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button>
    <button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button>
    <button type="button" class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button>
    <div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
                            </div>
                            <div class="col-md-6">
                                <p><code>$uibModal</code> is a service to create modal windows.
Creating modals is straightforward: create a template, a controller and reference them when using <code>$uibModal</code>.</p>
<p>The <code>$uibModal</code> service has only one method: <code>open(options)</code>.</p>
<h3 id="-uibmodal-s-open-function">$uibModal's open function</h3>
<h4 id="options-parameter">options parameter</h4>
<ul>
<li><p><code>animation</code>
<em>(Type: <code>boolean</code>, Default: <code>true</code>)</em> -
Set to false to disable animations on new modal/backdrop. Does not toggle animations for modals/backdrops that are already displayed.</p>
</li>
<li><p><code>appendTo</code> 
<em>(Type: <code>angular.element</code>, Default: <code>body</code>: Example: <code>$document.find('aside').eq(0)</code>)</em> -
Appends the modal to a specific element.</p>
</li>
<li><p><code>backdrop</code>
<em>(Type: <code>boolean|string</code>, Default: <code>true</code>)</em> -
Controls presence of a backdrop. Allowed values: <code>true</code> (default), <code>false</code> (no backdrop), <code>'static'</code> (disables modal closing by click on the backdrop).</p>
</li>
<li><p><code>backdropClass</code>
<em>(Type: <code>string</code>)</em> -
Additional CSS class(es) to be added to a modal backdrop template.</p>
</li>
<li><p><code>bindToController</code>
<em>(Type: <code>boolean</code>, Default: <code>false</code>)</em> -
When used with <code>controllerAs</code> &amp; set to <code>true</code>, it will bind the $scope properties onto the controller.</p>
</li>
<li><p><code>controller</code>
<em>(Type: <code>function|string|array</code>, Example: <code>MyModalController</code>)</em> -
A controller for the modal instance, either a controller name as a string, or an inline controller function, optionally wrapped in array notation for dependency injection. Allows the controller-as syntax. Has a special <code>$uibModalInstance</code> injectable to access the modal instance.</p>
</li>
<li><p><code>controllerAs</code>
<em>(Type: <code>string</code>, Example: <code>ctrl</code>)</em> - 
An alternative to the controller-as syntax. Requires the <code>controller</code> option to be provided as well.</p>
</li>
<li><p><code>keyboard</code> - 
<em>(Type: <code>boolean</code>, Default: <code>true</code>)</em> -
Indicates whether the dialog should be closable by hitting the ESC key.</p>
</li>
<li><p><code>openedClass</code>
<em>(Type: <code>string</code>, Default: <code>modal-open</code>)</em> -
Class added to the <code>body</code> element when the modal is opened.</p>
</li>
<li><p><code>resolve</code>
<em>(Type: <code>Object</code>)</em> -
Members that will be resolved and passed to the controller as locals; it is equivalent of the <code>resolve</code> property in the router.</p>
</li>
<li><p><code>scope</code>
<em>(Type: <code>$scope</code>)</em> -
The parent scope instance to be used for the modal's content. Defaults to <code>$rootScope</code>.</p>
</li>
<li><p><code>size</code>
<em>(Type: <code>string</code>, Example: <code>lg</code>)</em> -
Optional suffix of modal window class. The value used is appended to the <code>modal-</code> class, i.e. a value of <code>sm</code> gives <code>modal-sm</code>.</p>
</li>
<li><p><code>template</code>
<em>(Type: <code>string</code>)</em> -
Inline template representing the modal's content.</p>
</li>
<li><p><code>templateUrl</code>
<em>(Type: <code>string</code>)</em> -
A path to a template representing modal's content. You need either a <code>template</code> or <code>templateUrl</code>.</p>
</li>
<li><p><code>windowClass</code>
<em>(Type: <code>string</code>)</em> -
Additional CSS class(es) to be added to a modal window template.</p>
</li>
<li><p><code>windowTemplateUrl</code>
<em>(Type: <code>string</code>, Default: <code>uib/template/modal/window.html</code>)</em> -
A path to a template overriding modal's window template.</p>
</li>
<li><p><code>windowTopClass</code>
<em>(Type: <code>string</code>)</em> -
CSS class(es) to be added to the top modal window.</p>
</li>
</ul>
<p>Global defaults may be set for <code>$uibModal</code> via <code>$uibModalProvider.options</code>.</p>
<h4 id="return">return</h4>
<p>The <code>open</code> method returns a modal instance, an object with the following properties:</p>
<ul>
<li><p><code>close(result)</code>
<em>(Type: <code>function</code>)</em> -
Can be used to close a modal, passing a result.</p>
</li>
<li><p><code>dismiss(reason)</code>
<em>(Type: <code>function</code>)</em> -
Can be used to dismiss a modal, passing a reason.</p>
</li>
<li><p><code>result</code>
<em>(Type: <code>promise</code>)</em> -
Is resolved when a modal is closed and rejected when a modal is dismissed.</p>
</li>
<li><p><code>opened</code>
<em>(Type: <code>promise</code>)</em> -
Is resolved when a modal gets opened after downloading content's template and resolving all variables.</p>
</li>
<li><p><code>closed</code>
<em>(Type: <code>promise</code>)</em> -
Is resolved when a modal is closed and the animation completes.</p>
</li>
<li><p><code>rendered</code>
<em>(Type: <code>promise</code>)</em> -
Is resolved when a modal is rendered. </p>
</li>
</ul>
<hr>
<p>The scope associated with modal's content is augmented with:</p>
<ul>
<li><p><code>$close(result)</code>
<em>(Type: <code>function</code>)</em> -
A method that can be used to close a modal, passing a result.</p>
</li>
<li><p><code>$dismiss(reason)</code>
<em>(Type: <code>function</code>)</em> -
A method that can be used to dismiss a modal, passing a reason.</p>
</li>
</ul>
<p>Those methods make it easy to close a modal window without a need to create a dedicated controller.</p>
<p>Also, when using <code>bindToController</code>, you can define an <code>$onInit</code> method in the controller that will fire upon initialization.</p>
<hr>
<p>Events fired:</p>
<ul>
<li><p><code>$uibUnscheduledDestruction</code> - 
This event is fired if the $scope is destroyed via unexpected mechanism, such as it being passed in the modal options and a $route/$state transition occurs. The modal will also be dismissed.</p>
</li>
<li><p><code>modal.closing</code> -
This event is broadcast to the modal scope before the modal closes. If the listener calls preventDefault() on the event, then the modal will remain open.
Also, the <code>$close</code> and <code>$dismiss</code> methods returns true if the event was executed. This event also includes a parameter for the result/reason and a boolean that indicates whether the modal is being closed (true) or dismissed.</p>
</li>
</ul>
<h5 id="ui-router-resolves">UI Router resolves</h5>
<p>If one wants to have the modal resolve using <a href="https://github.com/angular-ui/ui-router">UI Router's</a> pre-1.0 resolve mechanism, one can call <code>$uibResolve.setResolver('$resolve')</code> in the configuration phase of the application. One can also provide a custom resolver as well, as long as the signature conforms to UI Router's <a href="http://angular-ui.github.io/ui-router/site/#/api/ui.router.util.$resolve">$resolve</a>.</p>

                            </div>
                        </div>
                        <hr>
                        <div class="row code">
                            <div class="col-md-12" ng-controller="PlunkerCtrl">
                                <div class="pull-right">
                                    <button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.5.0', '3.3.6', '1.2.5', 'modal')"><i class="glyphicon glyphicon-edit"></i> Edit in plunker</button>
                                </div>
                                <uib-tabset active="activeTab">
                                    <uib-tab index="0" heading="Markup">
                                        <div plunker-content="markup">
                                            <pre ng-non-bindable=""><code data-language="html" class="rainbow"><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">ng-controller</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">ModalDemoCtrl</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
    <span class="source js embedded"><span class="support tag script">&lt;</span><span class="entity tag script">script</span> <span class="entity tag script">type</span>=<span class="string">"text/ng-template"</span> <span class="entity tag script">id</span>=<span class="string">"myModalContent.html"</span><span class="support tag script">&gt;</span>
        <span class="keyword operator">&lt;</span>div <span class="keyword">class</span><span class="keyword operator">=</span><span class="string">"modal-header"</span><span class="keyword operator">&gt;</span>
            <span class="keyword operator">&lt;</span>h3 <span class="keyword">class</span><span class="keyword operator">=</span><span class="string">"modal-title"</span><span class="keyword operator">&gt;</span>I'm a modal<span class="keyword operator">!</span><span class="keyword operator">&lt;</span>/h3<span class="keyword operator">&gt;</span>
        <span class="keyword operator">&lt;</span>/div<span class="keyword operator">&gt;</span>
        <span class="keyword operator">&lt;</span>div <span class="keyword">class</span><span class="keyword operator">=</span><span class="string">"modal-body"</span><span class="keyword operator">&gt;</span>
            <span class="keyword operator">&lt;</span>ul<span class="keyword operator">&gt;</span>
                <span class="keyword operator">&lt;</span>li ng<span class="keyword operator">-</span>repeat<span class="keyword operator">=</span><span class="string">"item in items"</span><span class="keyword operator">&gt;</span>
                    <span class="keyword operator">&lt;</span>a href<span class="keyword operator">=</span><span class="string">"#"</span> ng<span class="keyword operator">-</span>click<span class="keyword operator">=</span><span class="string">"$event.preventDefault(); selected.item = item"</span><span class="keyword operator">&gt;</span>{{ item }}<span class="keyword operator">&lt;</span>/a<span class="keyword operator">&gt;</span>
                <span class="keyword operator">&lt;</span>/li<span class="keyword operator">&gt;</span>
            <span class="keyword operator">&lt;</span>/ul<span class="keyword operator">&gt;</span>
            Selected: <span class="keyword operator">&lt;</span>b<span class="keyword operator">&gt;</span>{{ selected.item }}<span class="keyword operator">&lt;</span>/b<span class="keyword operator">&gt;</span>
        <span class="keyword operator">&lt;</span>/div<span class="keyword operator">&gt;</span>
        <span class="keyword operator">&lt;</span>div <span class="keyword">class</span><span class="keyword operator">=</span><span class="string">"modal-footer"</span><span class="keyword operator">&gt;</span>
            <span class="keyword operator">&lt;</span>button <span class="keyword">class</span><span class="keyword operator">=</span><span class="string">"btn btn-primary"</span> type<span class="keyword operator">=</span><span class="string">"button"</span> ng<span class="keyword operator">-</span>click<span class="keyword operator">=</span><span class="string">"ok()"</span><span class="keyword operator">&gt;</span>OK<span class="keyword operator">&lt;</span>/button<span class="keyword operator">&gt;</span>
            <span class="keyword operator">&lt;</span>button <span class="keyword">class</span><span class="keyword operator">=</span><span class="string">"btn btn-warning"</span> type<span class="keyword operator">=</span><span class="string">"button"</span> ng<span class="keyword operator">-</span>click<span class="keyword operator">=</span><span class="string">"cancel()"</span><span class="keyword operator">&gt;</span>Cancel<span class="keyword operator">&lt;</span>/button<span class="keyword operator">&gt;</span>
        <span class="keyword operator">&lt;</span>/div<span class="keyword operator">&gt;</span>
    <span class="support tag script">&lt;/</span><span class="entity tag script">script</span><span class="support tag script">&gt;</span></span>

    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-default</span><span class="string quote">"</span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">open()</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Open me!<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-default</span><span class="string quote">"</span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">open('lg')</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Large modal<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-default</span><span class="string quote">"</span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">open('sm')</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Small modal<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-default</span><span class="string quote">"</span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">toggleAnimation()</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Toggle Animation ({{ animationsEnabled }})<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">ng-show</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">selected</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Selection from a modal: {{ selected }}<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span></code></pre>
                                        </div>
                                    </uib-tab>
                                    <uib-tab index="1" heading="JavaScript">
                                        <div plunker-content="javascript">
                                            <pre ng-non-bindable=""><code data-language="javascript" class="rainbow">angular.<span class="function call">module</span>(<span class="string">'ui.bootstrap.demo'</span>).<span class="function call">controller</span>(<span class="string">'ModalDemoCtrl'</span>, <span class="storage function">function</span> ($scope, $uibModal, $log) {

  $scope.items <span class="keyword operator">=</span> [<span class="string">'item1'</span>, <span class="string">'item2'</span>, <span class="string">'item3'</span>];

  $scope.animationsEnabled <span class="keyword operator">=</span> <span class="constant language">true</span>;

  $scope.open <span class="keyword operator">=</span> <span class="storage function">function</span> (size) {

    <span class="keyword">var</span> modalInstance <span class="keyword operator">=</span> $uibModal.<span class="function call">open</span>({
      animation: $scope.animationsEnabled,
      templateUrl: <span class="string">'myModalContent.html'</span>,
      controller: <span class="string">'ModalInstanceCtrl'</span>,
      size: size,
      resolve: {
        <span class="entity function">items</span>: <span class="storage function">function</span> () {
          <span class="keyword">return</span> $scope.items;
        }
      }
    });

    modalInstance.result.<span class="keyword">then</span>(<span class="storage function">function</span> (selectedItem) {
      $scope.selected <span class="keyword operator">=</span> selectedItem;
    }, <span class="storage function">function</span> () {
      $log.<span class="function call">info</span>(<span class="string">'Modal dismissed at: '</span> <span class="keyword operator">+</span> <span class="keyword">new</span> <span class="entity function">Date</span>());
    });
  };

  $scope.toggleAnimation <span class="keyword operator">=</span> <span class="storage function">function</span> () {
    $scope.animationsEnabled <span class="keyword operator">=</span> <span class="keyword operator">!</span>$scope.animationsEnabled;
  };

});

<span class="comment">// Please note that $uibModalInstance represents a modal window (instance) dependency.</span>
<span class="comment">// It is not the same as the $uibModal service used above.</span>

angular.<span class="function call">module</span>(<span class="string">'ui.bootstrap.demo'</span>).<span class="function call">controller</span>(<span class="string">'ModalInstanceCtrl'</span>, <span class="storage function">function</span> ($scope, $uibModalInstance, items) {

  $scope.items <span class="keyword operator">=</span> items;
  $scope.selected <span class="keyword operator">=</span> {
    item: $scope.items[<span class="constant numeric">0</span>]
  };

  $scope.ok <span class="keyword operator">=</span> <span class="storage function">function</span> () {
    $uibModalInstance.<span class="function call">close</span>($scope.selected.item);
  };

  $scope.cancel <span class="keyword operator">=</span> <span class="storage function">function</span> () {
    $uibModalInstance.<span class="function call">dismiss</span>(<span class="string">'cancel'</span>);
  };
});
</code></pre>
                                        </div>
                                    </uib-tab>
                                </uib-tabset>
                            </div>
                        </div>
                    </section>
                    <script>angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.animationsEnabled = true;

  $scope.open = function (size) {

    var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };

  $scope.toggleAnimation = function () {
    $scope.animationsEnabled = !$scope.animationsEnabled;
  };

});

// Please note that $uibModalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $uibModalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $uibModalInstance.dismiss('cancel');
  };
});
</script>
                
                    <section id="pager">
                        <div class="page-header">
                          <h1>Pager<small>
                              (<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/pager">ui.bootstrap.pager</a>)
                          </small></h1>
                          </div>
                          <div class="row">
                            <div class="col-md-6 show-grid">
                                <div ng-controller="PagerDemoCtrl">
  <h4>Pager</h4>
  <pre>You are currently on page {{currentPage}}</pre>
  <uib-pager total-items="totalItems" ng-model="currentPage"></uib-pager>
</div>

                            </div>
                            <div class="col-md-6">
                                <p>A lightweight pager directive that is focused on providing previous/next paging functionality</p>
<h3 id="uib-pager-settings">uib-pager settings</h3>
<ul>
<li><p><code>align</code>
<small class="badge">C</small>
<em>(Default: <code>true</code>)</em> -
Whether to align each link to the sides.</p>
</li>
<li><p><code>items-per-page</code>
<small class="badge">$</small>
<small class="badge">C</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>10</code>)</em> -
Maximum number of items per page. A value less than one indicates all items on one page.</p>
</li>
<li><p><code>next-text</code>
<small class="badge">C</small>
<em>(Default: <code>Next »</code>)</em> -
Text for Next button.</p>
</li>
<li><p><code>ng-disabled</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>false</code>)</em> -
Used to disable the pager component.</p>
</li>
<li><p><code>ng-model</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i> -
Current page number. First page is 1.</p>
</li>
<li><p><code>num-pages</code>
<small class="badge">$</small>
<small class="badge">readonly</small>
<em>(Default: <code>angular.noop</code>)</em> -
An optional expression assigned the total number of pages to display.</p>
</li>
<li><p><code>previous-text</code>
<small class="badge">C</small>
<em>(Default: <code>« Previous</code>)</em> -
Text for Previous button.</p>
</li>
<li><p><code>template-url</code>
<em>(Default: <code>uib/template/pager/pager.html</code>)</em> -
Override the template for the component with a custom provided template.</p>
</li>
<li><p><code>total-items</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i> -
Total number of items in all pages.</p>
</li>
</ul>

                            </div>
                        </div>
                        <hr>
                        <div class="row code">
                            <div class="col-md-12" ng-controller="PlunkerCtrl">
                                <div class="pull-right">
                                    <button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.5.0', '3.3.6', '1.2.5', 'pager')"><i class="glyphicon glyphicon-edit"></i> Edit in plunker</button>
                                </div>
                                <uib-tabset active="activeTab">
                                    <uib-tab index="0" heading="Markup">
                                        <div plunker-content="markup">
                                            <pre ng-non-bindable=""><code data-language="html" class="rainbow"><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">ng-controller</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">PagerDemoCtrl</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>Pager<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">pre</span></span><span class="support tag cclose">&gt;</span>You are currently on page {{currentPage}}<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">pre</span></span><span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-pager <span class="support attribute">total-items</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">totalItems</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">currentPage</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-pager<span class="support tag cclose">&gt;</span>
<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
</code></pre>
                                        </div>
                                    </uib-tab>
                                    <uib-tab index="1" heading="JavaScript">
                                        <div plunker-content="javascript">
                                            <pre ng-non-bindable=""><code data-language="javascript" class="rainbow">angular.<span class="function call">module</span>(<span class="string">'ui.bootstrap.demo'</span>).<span class="function call">controller</span>(<span class="string">'PagerDemoCtrl'</span>, <span class="keyword">function</span>($scope) {
  $scope.totalItems <span class="keyword operator">=</span> <span class="constant numeric">64</span>;
  $scope.currentPage <span class="keyword operator">=</span> <span class="constant numeric">4</span>;
});
</code></pre>
                                        </div>
                                    </uib-tab>
                                </uib-tabset>
                            </div>
                        </div>
                    </section>
                    <script>angular.module('ui.bootstrap.demo').controller('PagerDemoCtrl', function($scope) {
  $scope.totalItems = 64;
  $scope.currentPage = 4;
});
</script>
                
                    <section id="pagination">
                        <div class="page-header">
                          <h1>Pagination<small>
                              (<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/pagination">ui.bootstrap.pagination</a>)
                          </small></h1>
                          </div>
                          <div class="row">
                            <div class="col-md-6 show-grid">
                                <div ng-controller="PaginationDemoCtrl">
    <h4>Default</h4>
    <uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></uib-pagination>
    <uib-pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm" previous-text="‹" next-text="›" first-text="«" last-text="»"></uib-pagination>
    <uib-pagination direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></uib-pagination>
    <uib-pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages"></uib-pagination>
    <pre>The selected page no: {{currentPage}}</pre>
    <button type="button" class="btn btn-info" ng-click="setPage(3)">Set current page to: 3</button>

    <hr>
    <h4>Limit the maximum visible buttons</h4>
    <h6><code>rotate</code> defaulted to <code>true</code>:</h6>
    <uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" num-pages="numPages"></uib-pagination>
    <h6><code>rotate</code> defaulted to <code>true</code> and <code>force-ellipses</code> set to <code>true</code>:</h6>
    <uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" force-ellipses="true"></uib-pagination>
    <h6><code>rotate</code> set to <code>false</code>:</h6>
    <uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false"></uib-pagination>
    <h6><code>boundary-link-numbers</code> set to <code>true</code> and <code>rotate</code> defaulted to <code>true</code>:</h6>
    <uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-link-numbers="true"></uib-pagination>
    <h6><code>boundary-link-numbers</code> set to <code>true</code> and <code>rotate</code> set to <code>false</code>:</h6>
    <uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-link-numbers="true" rotate="false"></uib-pagination>
    <pre>Page: {{bigCurrentPage}} / {{numPages}}</pre>

</div>

                            </div>
                            <div class="col-md-6">
                                <p>A lightweight pagination directive that is focused on ... providing pagination &amp; will take care of visualising a pagination bar and enable / disable buttons correctly!</p>
<h3 id="uib-pagination-settings">uib-pagination settings</h3>
<ul>
<li><p><code>boundary-links</code>
<small class="badge">C</small>
<em>(Default: <code>false</code>)</em> -
Whether to display First / Last buttons.</p>
</li>
<li><p><code>boundary-link-numbers</code>
<small class="badge">$</small>
<small class="badge">C</small>
<em>(Default: <code>false</code>)</em> -
Whether to always display the first and last page numbers. If <code>max-size</code> is smaller than the number of pages, then the  first and last page numbers are still shown with ellipses in-between as necessary. NOTE: <code>max-size</code> refers to the center of the range. This option may add up to 2 more numbers on each side of the displayed range for the end value and what would be an ellipsis but is replaced by a number because it is sequential.</p>
</li>
<li><p><code>direction-links</code>
<small class="badge">$</small>
<small class="badge">C</small>
<em>(Default: <code>true</code>)</em> -
Whether to display Previous / Next buttons.</p>
</li>
<li><p><code>first-text</code>
<small class="badge">C</small>
<em>(Default: <code>First</code>)</em> -
Text for First button.</p>
</li>
<li><p><code>force-ellipses</code>
<small class="badge">$</small>
<small class="badge">C</small>
<em>(Default: <code>false</code>)</em> -
Also displays ellipses when <code>rotate</code> is true and <code>max-size</code> is smaller than the number of pages.</p>
</li>
<li><p><code>items-per-page</code>
<small class="badge">$</small>
<small class="badge">C</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>10</code>)</em> -
Maximum number of items per page. A value less than one indicates all items on one page.</p>
</li>
<li><p><code>last-text</code>
<small class="badge">C</small>
<em>(Default: <code>Last</code>)</em> -
Text for Last button.</p>
</li>
<li><p><code>max-size</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>null</code>)</em> -
Limit number for pagination size.</p>
</li>
<li><p><code>next-text</code>
<small class="badge">C</small>
<em>(Default: <code>Next</code>)</em> -
Text for Next button.</p>
</li>
<li><p><code>ng-change</code>
<small class="badge">$</small> -
This can be used to call a function whenever the page changes.</p>
</li>
<li><p><code>ng-disabled</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>false</code>)</em> -
Used to disable the pagination component.</p>
</li>
<li><p><code>ng-model</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i> -
Current page number. First page is 1.</p>
</li>
<li><p><code>num-pages</code>
<small class="badge">$</small>
<small class="badge">readonly</small>
<em>(Default: <code>angular.noop</code>)</em> -
An optional expression assigned the total number of pages to display.</p>
</li>
<li><p><code>page-label</code>
<em>(Default: <code>angular.identity</code>)</em> -
An optional expression to override the page label based on passing the current page indexes. Supports page number with <code>$page</code> in the template.</p>
</li>
<li><p><code>previous-text</code>
<small class="badge">C</small>
<em>(Default: <code>Previous</code>)</em> -
Text for Previous button.</p>
</li>
<li><p><code>rotate</code>
<small class="badge">$</small>
<small class="badge">C</small>
<em>(Default: <code>true</code>)</em> -
Whether to keep current page in the middle of the visible ones.</p>
</li>
<li><p><code>template-url</code>
<em>(Default: <code>uib/template/pagination/pagination.html</code>)</em> -
Override the template for the component with a custom provided template</p>
</li>
<li><p><code>total-items</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i> -
Total number of items in all pages.</p>
</li>
</ul>

                            </div>
                        </div>
                        <hr>
                        <div class="row code">
                            <div class="col-md-12" ng-controller="PlunkerCtrl">
                                <div class="pull-right">
                                    <button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.5.0', '3.3.6', '1.2.5', 'pagination')"><i class="glyphicon glyphicon-edit"></i> Edit in plunker</button>
                                </div>
                                <uib-tabset active="activeTab">
                                    <uib-tab index="0" heading="Markup">
                                        <div plunker-content="markup">
                                            <pre ng-non-bindable=""><code data-language="html" class="rainbow"><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">ng-controller</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">PaginationDemoCtrl</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>Default<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-pagination <span class="support attribute">total-items</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">totalItems</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">currentPage</span><span class="string quote">"</span> <span class="support attribute">ng-change</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">pageChanged()</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-pagination<span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-pagination <span class="support attribute">boundary-links</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">true</span><span class="string quote">"</span> <span class="support attribute">total-items</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">totalItems</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">currentPage</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">pagination-sm</span><span class="string quote">"</span> <span class="support attribute">previous-text</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">&amp;lsaquo;</span><span class="string quote">"</span> <span class="support attribute">next-text</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">&amp;rsaquo;</span><span class="string quote">"</span> <span class="support attribute">first-text</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">&amp;laquo;</span><span class="string quote">"</span> <span class="support attribute">last-text</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">&amp;raquo;</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-pagination<span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-pagination <span class="support attribute">direction-links</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">false</span><span class="string quote">"</span> <span class="support attribute">boundary-links</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">true</span><span class="string quote">"</span> <span class="support attribute">total-items</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">totalItems</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">currentPage</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-pagination<span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-pagination <span class="support attribute">direction-links</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">false</span><span class="string quote">"</span> <span class="support attribute">total-items</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">totalItems</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">currentPage</span><span class="string quote">"</span> <span class="support attribute">num-pages</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">smallnumPages</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-pagination<span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">pre</span></span><span class="support tag cclose">&gt;</span>The selected page no: {{currentPage}}<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">pre</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-info</span><span class="string quote">"</span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">setPage(3)</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Set current page to: 3<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>

    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">hr</span></span> <span class="support tag cclose">/&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>Limit the maximum visible buttons<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h6</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">code</span></span><span class="support tag cclose">&gt;</span>rotate<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">code</span></span><span class="support tag cclose">&gt;</span> defaulted to <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">code</span></span><span class="support tag cclose">&gt;</span>true<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">code</span></span><span class="support tag cclose">&gt;</span>:<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h6</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-pagination <span class="support attribute">total-items</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">bigTotalItems</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">bigCurrentPage</span><span class="string quote">"</span> <span class="support attribute">max-size</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">maxSize</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">pagination-sm</span><span class="string quote">"</span> <span class="support attribute">boundary-links</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">true</span><span class="string quote">"</span> <span class="support attribute">num-pages</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">numPages</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-pagination<span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h6</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">code</span></span><span class="support tag cclose">&gt;</span>rotate<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">code</span></span><span class="support tag cclose">&gt;</span> defaulted to <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">code</span></span><span class="support tag cclose">&gt;</span>true<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">code</span></span><span class="support tag cclose">&gt;</span> and <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">code</span></span><span class="support tag cclose">&gt;</span>force-ellipses<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">code</span></span><span class="support tag cclose">&gt;</span> set to <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">code</span></span><span class="support tag cclose">&gt;</span>true<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">code</span></span><span class="support tag cclose">&gt;</span>:<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h6</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-pagination <span class="support attribute">total-items</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">bigTotalItems</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">bigCurrentPage</span><span class="string quote">"</span> <span class="support attribute">max-size</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">maxSize</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">pagination-sm</span><span class="string quote">"</span> <span class="support attribute">boundary-links</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">true</span><span class="string quote">"</span> <span class="support attribute">force-ellipses</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">true</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-pagination<span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h6</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">code</span></span><span class="support tag cclose">&gt;</span>rotate<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">code</span></span><span class="support tag cclose">&gt;</span> set to <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">code</span></span><span class="support tag cclose">&gt;</span>false<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">code</span></span><span class="support tag cclose">&gt;</span>:<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h6</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-pagination <span class="support attribute">total-items</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">bigTotalItems</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">bigCurrentPage</span><span class="string quote">"</span> <span class="support attribute">max-size</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">maxSize</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">pagination-sm</span><span class="string quote">"</span> <span class="support attribute">boundary-links</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">true</span><span class="string quote">"</span> <span class="support attribute">rotate</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">false</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-pagination<span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h6</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">code</span></span><span class="support tag cclose">&gt;</span>boundary-link-numbers<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">code</span></span><span class="support tag cclose">&gt;</span> set to <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">code</span></span><span class="support tag cclose">&gt;</span>true<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">code</span></span><span class="support tag cclose">&gt;</span> and <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">code</span></span><span class="support tag cclose">&gt;</span>rotate<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">code</span></span><span class="support tag cclose">&gt;</span> defaulted to <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">code</span></span><span class="support tag cclose">&gt;</span>true<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">code</span></span><span class="support tag cclose">&gt;</span>:<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h6</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-pagination <span class="support attribute">total-items</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">bigTotalItems</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">bigCurrentPage</span><span class="string quote">"</span> <span class="support attribute">max-size</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">maxSize</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">pagination-sm</span><span class="string quote">"</span> <span class="support attribute">boundary-link-numbers</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">true</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-pagination<span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h6</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">code</span></span><span class="support tag cclose">&gt;</span>boundary-link-numbers<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">code</span></span><span class="support tag cclose">&gt;</span> set to <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">code</span></span><span class="support tag cclose">&gt;</span>true<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">code</span></span><span class="support tag cclose">&gt;</span> and <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">code</span></span><span class="support tag cclose">&gt;</span>rotate<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">code</span></span><span class="support tag cclose">&gt;</span> set to <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">code</span></span><span class="support tag cclose">&gt;</span>false<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">code</span></span><span class="support tag cclose">&gt;</span>:<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h6</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-pagination <span class="support attribute">total-items</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">bigTotalItems</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">bigCurrentPage</span><span class="string quote">"</span> <span class="support attribute">max-size</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">maxSize</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">pagination-sm</span><span class="string quote">"</span> <span class="support attribute">boundary-link-numbers</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">true</span><span class="string quote">"</span> <span class="support attribute">rotate</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">false</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-pagination<span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">pre</span></span><span class="support tag cclose">&gt;</span>Page: {{bigCurrentPage}} / {{numPages}}<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">pre</span></span><span class="support tag cclose">&gt;</span>

<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
</code></pre>
                                        </div>
                                    </uib-tab>
                                    <uib-tab index="1" heading="JavaScript">
                                        <div plunker-content="javascript">
                                            <pre ng-non-bindable=""><code data-language="javascript" class="rainbow">angular.<span class="function call">module</span>(<span class="string">'ui.bootstrap.demo'</span>).<span class="function call">controller</span>(<span class="string">'PaginationDemoCtrl'</span>, <span class="storage function">function</span> ($scope, $log) {
  $scope.totalItems <span class="keyword operator">=</span> <span class="constant numeric">64</span>;
  $scope.currentPage <span class="keyword operator">=</span> <span class="constant numeric">4</span>;

  $scope.setPage <span class="keyword operator">=</span> <span class="storage function">function</span> (pageNo) {
    $scope.currentPage <span class="keyword operator">=</span> pageNo;
  };

<span class="entity function">  $scope.pageChanged </span><span class="keyword operator">=</span> <span class="keyword">function</span>() {
    $log.<span class="support method">log</span>(<span class="string">'Page changed to: '</span> <span class="keyword operator">+</span> $scope.currentPage);
  };

  $scope.maxSize <span class="keyword operator">=</span> <span class="constant numeric">5</span>;
  $scope.bigTotalItems <span class="keyword operator">=</span> <span class="constant numeric">175</span>;
  $scope.bigCurrentPage <span class="keyword operator">=</span> <span class="constant numeric">1</span>;
});
</code></pre>
                                        </div>
                                    </uib-tab>
                                </uib-tabset>
                            </div>
                        </div>
                    </section>
                    <script>angular.module('ui.bootstrap.demo').controller('PaginationDemoCtrl', function ($scope, $log) {
  $scope.totalItems = 64;
  $scope.currentPage = 4;

  $scope.setPage = function (pageNo) {
    $scope.currentPage = pageNo;
  };

  $scope.pageChanged = function() {
    $log.log('Page changed to: ' + $scope.currentPage);
  };

  $scope.maxSize = 5;
  $scope.bigTotalItems = 175;
  $scope.bigCurrentPage = 1;
});
</script>
                
                    <section id="popover">
                        <div class="page-header">
                          <h1>Popover<small>
                              (<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/popover">ui.bootstrap.popover</a>)
                          </small></h1>
                          </div>
                          <div class="row">
                            <div class="col-md-6 show-grid">
                                <div ng-controller="PopoverDemoCtrl">
    <h4>Dynamic</h4>
    <div class="form-group">
      <label>Popup Text:</label>
      <input type="text" ng-model="dynamicPopover.content" class="form-control">
    </div>
    <div class="form-group">
      <label>Popup Title:</label>
      <input type="text" ng-model="dynamicPopover.title" class="form-control">
    </div>
    <div class="form-group">
      <label>Popup Template:</label>
      <input type="text" ng-model="dynamicPopover.templateUrl" class="form-control">
    </div>
    <button uib-popover="{{dynamicPopover.content}}" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default">Dynamic Popover</button>

    <button uib-popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default">Popover With Template</button>

    <script type="text/ng-template" id="myPopoverTemplate.html">
        <div>{{dynamicPopover.content}}</div>
        <div class="form-group">
          <label>Popup Title:</label>
          <input type="text" ng-model="dynamicPopover.title" class="form-control">
        </div>
    </script>
    <hr>
    <h4>Positional</h4>
    <div class="form-group">
      <label>Popover placement</label>
      <select class="form-control" ng-model="placement.selected" ng-options="o as o for o in placement.options"></select>
    </div>
    <button popover-placement="{{placement.selected}}" uib-popover="On the {{placement.selected}}" type="button" class="btn btn-default">Popover {{placement.selected}}</button>

    <hr>
    <h4>Triggers</h4>
    <p>
      <button uib-popover="I appeared on mouse enter!" popover-trigger="mouseenter" type="button" class="btn btn-default">Mouseenter</button>
    </p>
    <input type="text" value="Click me!" uib-popover="I appeared on focus! Click away and I'll vanish..." popover-trigger="focus" class="form-control">

    <hr>
    <h4>Other</h4>
    <button popover-animation="true" uib-popover="I fade in and out!" type="button" class="btn btn-default">fading</button>
    <button uib-popover="I have a title!" popover-title="The title." type="button" class="btn btn-default">title</button>
    <button uib-popover="I am activated manually" popover-is-open="popoverIsOpen" ng-click="popoverIsOpen = !popoverIsOpen" type="button" class="btn btn-default">Toggle popover</button>
    <button uib-popover-html="htmlPopover" class="btn btn-default">HTML Popover</button>
</div>

                            </div>
                            <div class="col-md-6">
                                <p>A lightweight, extensible directive for fancy popover creation. The popover
directive supports multiple placements, optional transition animation, and more.</p>
<p>Like the Bootstrap jQuery plugin, the popover <strong>requires</strong> the tooltip
module.</p>
<p><strong>Note to mobile developers</strong>:  Please note that while popovers may work correctly on mobile devices (including tablets),
  we have made the decision to not officially support such a use-case because it does not make sense from a UX perspective.</p>
<p>There are three versions of the popover: <code>uib-popover</code> and <code>uib-popover-template</code>, and <code>uib-popover-html</code>:</p>
<ul>
<li><code>uib-popover</code> -
Takes text only and will escape any HTML provided for the popover body.</li>
<li><code>uib-popover-html</code>
<small class="badge">$</small> -
Takes an expression that evaluates to an HTML string. Note that this HTML is not compiled. If compilation is required, please use the <code>uib-popover-template</code> attribute option instead.  <em>The user is responsible for ensuring the content is safe to put into the DOM!</em></li>
<li><code>uib-popover-template</code>
<small class="badge">$</small> -
A URL representing the location of a template to use for the popover body. Note that the contents of this template need to be wrapped in a tag, e.g., <code>&lt;div&gt;&lt;/div&gt;</code>.</li>
</ul>
<h3 id="uib-popover-settings">uib-popover-* settings</h3>
<p>All these settings are available for the three types of popovers.</p>
<ul>
<li><p><code>popover-animation</code>
<small class="badge">$</small>
<small class="badge">C</small>
<em>(Default: <code>true</code>, Config: <code>animation</code>)</em> -
Should it fade in and out?</p>
</li>
<li><p><code>popover-append-to-body</code>
<small class="badge">$</small>
<small class="badge">C</small>
<em>(Default: <code>false</code>, Config: <code>appendToBody</code>)</em> -
Should the popover be appended to '$body' instead of the parent element?</p>
</li>
<li><p><code>popover-enable</code>
<small class="badge">$</small>
<em>(Default: <code>true</code>)</em> -
Is it enabled? It will enable or disable the configured popover-trigger.</p>
</li>
<li><p><code>popover-is-open</code>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>false</code>)</em> -
Whether to show the popover.</p>
</li>
<li><p><code>popover-placement</code>
<small class="badge">C</small>
<em>(Default: <code>top</code>, Config: <code>placement</code>)</em> -
Passing in 'auto' separated by a space before the placement will enable auto positioning, e.g: "auto bottom-left". The popover will attempt to position where it fits in the closest scrollable ancestor. Accepts:</p>
<ul>
<li><code>top</code> - popover on top, horizontally centered on host element.</li>
<li><code>top-left</code> - popover on top, left edge aligned with host element left edge.</li>
<li><code>top-right</code> - popover on top, right edge aligned with host element right edge.</li>
<li><code>bottom</code> - popover on bottom, horizontally centered on host element.</li>
<li><code>bottom-left</code> - popover on bottom, left edge aligned with host element left edge.</li>
<li><code>bottom-right</code> - popover on bottom, right edge aligned with host element right edge.</li>
<li><code>left</code> - popover on left, vertically centered on host element.</li>
<li><code>left-top</code> - popover on left, top edge aligned with host element top edge.</li>
<li><code>left-bottom</code> - popover on left, bottom edge aligned with host element bottom edge.</li>
<li><code>right</code> - popover on right, vertically centered on host element.</li>
<li><code>right-top</code> - popover on right, top edge aligned with host element top edge.</li>
<li><code>right-bottom</code> - popover on right, bottom edge aligned with host element bottom edge.</li>
</ul>
</li>
<li><p><code>popover-popup-close-delay</code>
<small class="badge">C</small>
<em>(Default: <code>0</code>, Config: <code>popupCloseDelay</code>)</em> -
For how long should the popover remain open after the close trigger event?</p>
</li>
<li><p><code>popover-popup-delay</code>
<small class="badge">C</small>
<em>(Default: <code>0</code>, Config: <code>popupDelay</code>)</em> -
Popup delay in milliseconds until it opens.</p>
</li>
<li><p><code>popover-title</code> -
 A string to display as a fancy title.</p>
</li>
<li><p><code>popover-trigger</code>
<em>(Default: <code>click</code>)</em> -
What should trigger a show of the popover? Supports a space separated list of event names (see below).</p>
</li>
</ul>
<p><strong>Note:</strong> To configure the tooltips, you need to do it on <code>$uibTooltipProvider</code> (also see below).</p>
<h3 id="triggers">Triggers</h3>
<p>The following show triggers are supported out of the box, along with their provided hide triggers:</p>
<ul>
<li><code>mouseenter</code>: <code>mouseleave</code></li>
<li><code>click</code>: <code>click</code></li>
<li><code>outsideClick</code>: <code>outsideClick</code></li>
<li><code>focus</code>: <code>blur</code></li>
<li><code>none</code></li>
</ul>
<p>The <code>outsideClick</code> trigger will cause the popover to toggle on click, and hide when anything else is clicked.</p>
<p>For any non-supported value, the trigger will be used to both show and hide the
popover. Using the 'none' trigger will disable the internal trigger(s), one can
then use the <code>popover-is-open</code> attribute exclusively to show and hide the popover.</p>
<h3 id="-uibtooltipprovider">$uibTooltipProvider</h3>
<p>Through the <code>$uibTooltipProvider</code>, you can change the way tooltips and popovers
behave by default; the attributes above always take precedence. The following
methods are available:</p>
<ul>
<li><p><code>setTriggers(obj)</code>
<em>(Example: <code>{ 'openTrigger': 'closeTrigger' }</code>)</em> -
Extends the default trigger mappings mentioned above with mappings of your own.</p>
</li>
<li><p><code>options(obj)</code> -
Provide a set of defaults for certain tooltip and popover attributes. Currently supports the ones with the <small class="badge">C</small> badge.</p>
</li>
</ul>
<h3 id="known-issues">Known issues</h3>
<p>For Safari 7+ support, if you want to use <strong>focus</strong> <code>popover-trigger</code>, you need to use an anchor tag with a tab index. For example:</p>
<pre><code>&lt;a tabindex="0" uib-popover="Test" popover-trigger="focus" class="btn btn-default"&gt;
  Click Me
&lt;/a&gt;
</code></pre>
                            </div>
                        </div>
                        <hr>
                        <div class="row code">
                            <div class="col-md-12" ng-controller="PlunkerCtrl">
                                <div class="pull-right">
                                    <button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.5.0', '3.3.6', '1.2.5', 'popover')"><i class="glyphicon glyphicon-edit"></i> Edit in plunker</button>
                                </div>
                                <uib-tabset active="activeTab">
                                    <uib-tab index="0" heading="Markup">
                                        <div plunker-content="markup">
                                            <pre ng-non-bindable=""><code data-language="html" class="rainbow"><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">ng-controller</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">PopoverDemoCtrl</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>Dynamic<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-group</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>Popup Text:<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">input</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">text</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">dynamicPopover.content</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-control</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-group</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>Popup Title:<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">input</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">text</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">dynamicPopover.title</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-control</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-group</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>Popup Template:<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">input</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">text</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">dynamicPopover.templateUrl</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-control</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">uib-popover</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">{{dynamicPopover.content}}</span><span class="string quote">"</span> <span class="support attribute">popover-title</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">{{dynamicPopover.title}}</span><span class="string quote">"</span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-default</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Dynamic Popover<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>

    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">uib-popover-template</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">dynamicPopover.templateUrl</span><span class="string quote">"</span> <span class="support attribute">popover-title</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">{{dynamicPopover.title}}</span><span class="string quote">"</span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-default</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Popover With Template<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>

    <span class="source js embedded"><span class="support tag script">&lt;</span><span class="entity tag script">script</span> <span class="entity tag script">type</span>=<span class="string">"text/ng-template"</span> <span class="entity tag script">id</span>=<span class="string">"myPopoverTemplate.html"</span><span class="support tag script">&gt;</span>
        <span class="keyword operator">&lt;</span>div<span class="keyword operator">&gt;</span>{{dynamicPopover.content}}<span class="keyword operator">&lt;</span>/div<span class="keyword operator">&gt;</span>
        <span class="keyword operator">&lt;</span>div <span class="keyword">class</span><span class="keyword operator">=</span><span class="string">"form-group"</span><span class="keyword operator">&gt;</span>
          <span class="keyword operator">&lt;</span>label<span class="keyword operator">&gt;</span>Popup Title:<span class="keyword operator">&lt;</span>/label<span class="keyword operator">&gt;</span>
          <span class="keyword operator">&lt;</span>input type<span class="keyword operator">=</span><span class="string">"text"</span> ng<span class="keyword operator">-</span>model<span class="keyword operator">=</span><span class="string">"dynamicPopover.title"</span> <span class="keyword">class</span><span class="keyword operator">=</span><span class="string">"form-control"</span><span class="keyword operator">&gt;</span>
        <span class="keyword operator">&lt;</span>/div<span class="keyword operator">&gt;</span>
    <span class="support tag script">&lt;/</span><span class="entity tag script">script</span><span class="support tag script">&gt;</span></span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">hr</span></span> <span class="support tag cclose">/&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>Positional<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-group</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>Popover placement<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">select</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-control</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">placement.selected</span><span class="string quote">"</span> <span class="support attribute">ng-options</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">o as o for o in placement.options</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">select</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">popover-placement</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">{{placement.selected}}</span><span class="string quote">"</span> <span class="support attribute">uib-popover</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">On the {{placement.selected}}</span><span class="string quote">"</span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-default</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Popover {{placement.selected}}<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>

    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">hr</span></span> <span class="support tag cclose">/&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>Triggers<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">p</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">uib-popover</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">I appeared on mouse enter!</span><span class="string quote">"</span> <span class="support attribute">popover-trigger</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">mouseenter</span><span class="string quote">"</span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-default</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Mouseenter<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">p</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">input</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">text</span><span class="string quote">"</span> <span class="support attribute">value</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">Click me!</span><span class="string quote">"</span> <span class="support attribute">uib-popover</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">I appeared on focus! Click away and I'll vanish...</span><span class="string quote">"</span>  <span class="support attribute">popover-trigger</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">focus</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-control</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>

    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">hr</span></span> <span class="support tag cclose">/&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>Other<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">popover-animation</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">true</span><span class="string quote">"</span> <span class="support attribute">uib-popover</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">I fade in and out!</span><span class="string quote">"</span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-default</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>fading<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">uib-popover</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">I have a title!</span><span class="string quote">"</span> <span class="support attribute">popover-title</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">The title.</span><span class="string quote">"</span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-default</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>title<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">uib-popover</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">I am activated manually</span><span class="string quote">"</span> <span class="support attribute">popover-is-open</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">popoverIsOpen</span><span class="string quote">"</span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">popoverIsOpen = !popoverIsOpen</span><span class="string quote">"</span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-default</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Toggle popover<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">uib-popover-html</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">htmlPopover</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-default</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>HTML Popover<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
</code></pre>
                                        </div>
                                    </uib-tab>
                                    <uib-tab index="1" heading="JavaScript">
                                        <div plunker-content="javascript">
                                            <pre ng-non-bindable=""><code data-language="javascript" class="rainbow">angular.<span class="function call">module</span>(<span class="string">'ui.bootstrap.demo'</span>).<span class="function call">controller</span>(<span class="string">'PopoverDemoCtrl'</span>, <span class="storage function">function</span> ($scope, $sce) {
  $scope.dynamicPopover <span class="keyword operator">=</span> {
    content: <span class="string">'Hello, World!'</span>,
    templateUrl: <span class="string">'myPopoverTemplate.html'</span>,
    title: <span class="string">'Title'</span>
  };

  $scope.placement <span class="keyword operator">=</span> {
    options: [
      <span class="string">'top'</span>,
      <span class="string">'top-left'</span>,
      <span class="string">'top-right'</span>,
      <span class="string">'bottom'</span>,
      <span class="string">'bottom-left'</span>,
      <span class="string">'bottom-right'</span>,
      <span class="string">'left'</span>,
      <span class="string">'left-top'</span>,
      <span class="string">'left-bottom'</span>,
      <span class="string">'right'</span>,
      <span class="string">'right-top'</span>,
      <span class="string">'right-bottom'</span>
    ],
    selected: <span class="string">'top'</span>
  };
  
  $scope.htmlPopover <span class="keyword operator">=</span> $sce.<span class="function call">trustAsHtml</span>(<span class="string">'&lt;b style="color: red"&gt;I can&lt;/b&gt; have &lt;div class="label label-success"&gt;HTML&lt;/div&gt; content'</span>);
});
</code></pre>
                                        </div>
                                    </uib-tab>
                                </uib-tabset>
                            </div>
                        </div>
                    </section>
                    <script>angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope, $sce) {
  $scope.dynamicPopover = {
    content: 'Hello, World!',
    templateUrl: 'myPopoverTemplate.html',
    title: 'Title'
  };

  $scope.placement = {
    options: [
      'top',
      'top-left',
      'top-right',
      'bottom',
      'bottom-left',
      'bottom-right',
      'left',
      'left-top',
      'left-bottom',
      'right',
      'right-top',
      'right-bottom'
    ],
    selected: 'top'
  };
  
  $scope.htmlPopover = $sce.trustAsHtml('<b style="color: red">I can</b> have <div class="label label-success">HTML</div> content');
});
</script>
                
                    <section id="position">
                        <div class="page-header">
                          <h1>Position<small>
                              (<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/position">ui.bootstrap.position</a>)
                          </small></h1>
                          </div>
                          <div class="row">
                            <div class="col-md-6 show-grid">
                                <div ng-controller="PositionDemoCtrl">
  <h4>$uibPosition service</h4>
  <div id="posdemoparent" ng-style="{'overflow': (parentScrollable &amp;&amp; 'scroll'), 'position': (parentRelative &amp;&amp; 'relative')}" style="border: 1px solid #ccc; padding: 15px;">
    <div class="checkbox">
      <label>
        <input type="checkbox" ng-model="parentScrollable"> Parent scrollable
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" ng-model="parentRelative"> Parent relative
      </label>
    </div>
    <button id="posdemobtn" class="btn btn-default" ng-click="getValues()">Get values</button>

    <div id="posdemodiv" style="width: 100px; height: 100px; margin: 15px 0; padding: 10px; background-color: #f8f8f8; border: 1px solid #ccc;">
      Demo element
    </div>
  </div>
  <br>
  offsetParent: {{elemVals.offsetParent}}
  <br>
  scrollParent: {{elemVals.scrollParent}}
  <br>
  scrollbarWidth: {{scrollbarWidth}}
  <br>
  position: {{elemVals.position}}
  <br>
  offset: {{elemVals.offset}}
  <br>
  viewportOffset: {{elemVals.viewportOffset}}
  <br>
  positionElements: {{elemVals.positionElements}}
</div>
                            </div>
                            <div class="col-md-6">
                                <p>The <code>$uibPosition</code> service provides a set of DOM utilities used internally to absolute-position an element in relation to another element (tooltips, popovers, typeaheads etc...).</p>
<h4 id="getrawnode-element-">getRawNode(element)</h4>
<p>Takes a jQuery/jqLite element and converts it to a raw DOM element.</p>
<h5 id="parameters">parameters</h5>
<ul>
<li><code>element</code>
<em>(Type: <code>object</code>)</em> -
The element to convert.</li>
</ul>
<h5 id="returns">returns</h5>
<ul>
<li><em>(Type: <code>element</code>)</em> -
A raw DOM element.</li>
</ul>
<h4 id="parsestyle-element-">parseStyle(element)</h4>
<p>Parses a numeric style value to a number.  Strips units and will return 0 for invalid (NaN) numbers.</p>
<h5 id="parameters">parameters</h5>
<ul>
<li><code>value</code>
<em>(Type: <code>string</code>)</em> -
The style value to parse.</li>
</ul>
<h5 id="returns">returns</h5>
<ul>
<li><em>(Type: <code>number</code>)</em> -
The numeric value of the style property.</li>
</ul>
<h4 id="offsetparent-element-">offsetParent(element)</h4>
<p>Gets the closest positioned ancestor.</p>
<h5 id="parameters">parameters</h5>
<ul>
<li><code>element</code>
<em>(Type: <code>element</code>)</em> -
The element to get the offset parent for.</li>
</ul>
<h5 id="returns">returns</h5>
<ul>
<li><em>(Type: <code>element</code>)</em> -
The closest positioned ancestor.</li>
</ul>
<h4 id="scrollbarwidth-">scrollbarWidth()</h4>
<p>Calculates the browser scrollbar width and caches the result for future calls.  Concept from the TWBS measureScrollbar() function in <a href="https://github.com/twbs/bootstrap/blob/master/js/modal.js">modal.js</a>.</p>
<h5 id="returns">returns</h5>
<ul>
<li><em>(Type: <code>number</code>)</em> -
The width of the browser scrollbar.</li>
</ul>
<h4 id="isscrollable-element-includehidden-">isScrollable(element, includeHidden)</h4>
<p>Determines if an element is scrollable.</p>
<h5 id="parameters">parameters</h5>
<ul>
<li><p><code>element</code>
<em>(Type: <code>element</code>)</em> -
The element to check.</p>
</li>
<li><p><code>includeHidden</code>
<em>(Type: <code>boolean</code>, Default: <code>false</code>, optional)</em> - Should scroll style of 'hidden' be considered.</p>
</li>
</ul>
<h5 id="returns">returns</h5>
<ul>
<li><em>(Type: <code>boolean</code>)</em> -
Whether the element is scrollable.</li>
</ul>
<h4 id="scrollparent-element-includehidden-">scrollParent(element, includeHidden)</h4>
<p>Gets the closest scrollable ancestor.  Concept from the jQueryUI <a href="https://github.com/jquery/jquery-ui/blob/master/ui/scroll-parent.js">scrollParent.js</a>.</p>
<h5 id="parameters">parameters</h5>
<ul>
<li><p><code>element</code>
<em>(Type: <code>element</code>)</em> -
The element to get the closest scrollable ancestor for.</p>
</li>
<li><p><code>includeHidden</code>
<em>(Type: <code>boolean</code>, Default: <code>false</code>, optional)</em> - Should scroll style of 'hidden' be considered.</p>
</li>
</ul>
<h5 id="returns">returns</h5>
<ul>
<li><em>(Type: <code>element</code>)</em> -
The closest scrollable ancestor.</li>
</ul>
<h4 id="position-element-includemargins-">position(element, includeMargins)</h4>
<p>A read-only equivalent of jQuery's <a href="http://api.jquery.com/position/">position</a> function, distance to closest positioned ancestor. Does not account for margins by default like jQuery's position.</p>
<h5 id="parameters">parameters</h5>
<ul>
<li><p><code>element</code> <em>(Type: <code>element</code>)</em> -
The element to get the position for.</p>
</li>
<li><p><code>includeMargins</code> <em>(Type: <code>boolean</code>, Default: <code>false</code>, optional)</em> -
Should margins be accounted for.</p>
</li>
</ul>
<h5 id="returns">returns</h5>
<p>An object with the following properties:</p>
<ul>
<li><p><code>width</code>
<em>(Type: <code>number</code>)</em> -
The width of the element.</p>
</li>
<li><p><code>height</code>
<em>(Type: <code>number</code>)</em> -
The height of the element.</p>
</li>
<li><p><code>top</code>
<em>(Type: <code>number</code>)</em> -
Distance to top edge of offset parent.</p>
</li>
<li><p><code>left</code>
<em>(Type: <code>number</code>)</em> -
Distance to left edge of offset parent.</p>
</li>
</ul>
<h4 id="offset-element-">offset(element)</h4>
<p>A read-only equivalent of jQuery's <a href="http://api.jquery.com/offset/">offset</a> function, distance to viewport.</p>
<h5 id="parameters">parameters</h5>
<ul>
<li><code>element</code>
<em>(Type: <code>element</code>)</em> -
The element to get the offset for.</li>
</ul>
<h5 id="returns">returns</h5>
<p>An object with the following properties:</p>
<ul>
<li><p><code>width</code>
<em>(Type: <code>number</code>)</em> -
The width of the element.</p>
</li>
<li><p><code>height</code>
<em>(Type: <code>number</code>)</em> -
The height of the element.</p>
</li>
<li><p><code>top</code>
<em>(Type: <code>number</code>)</em> -
Distance to top edge of the viewport.</p>
</li>
<li><p><code>left</code>
<em>(Type: <code>number</code>)</em> -
Distance to left edge of the viewport.</p>
</li>
</ul>
<h4 id="viewportoffset-element-usedocument-includepadding-">viewportOffset(element, useDocument, includePadding)</h4>
<p>Gets the elements available space relative to the closest scrollable ancestor.  Accounts for padding, border, and scrollbar width.
Right and bottom dimensions represent the distance to the respective edge of the viewport element, not the top and left edge.
If the element edge extends beyond the viewport, a negative value will be reported.</p>
<h5 id="parameters">parameters</h5>
<ul>
<li><p><code>element</code>
<em>(Type: <code>element</code>)</em> -
The element to get the viewport offset for.</p>
</li>
<li><p><code>useDocument</code>
<em>(Type: <code>boolean</code>, Default: <code>false</code>, optional)</em> -
Should the viewport be the document element instead of the first scrollable element.</p>
</li>
<li><p><code>includePadding</code>
<em>(Type: <code>boolean</code>, Default: <code>true</code>, optional)</em> -
Should the padding on the viewport element be accounted for, default is true.</p>
</li>
</ul>
<h5 id="returns">returns</h5>
<p>An object with the following properties:</p>
<ul>
<li><p><code>top</code>
<em>(Type: <code>number</code>)</em> -
Distance to top content edge of the viewport.</p>
</li>
<li><p><code>bottom</code>
<em>(Type: <code>number</code>)</em> -
Distance to bottom content edge of the viewport.</p>
</li>
<li><p><code>left</code>
<em>(Type: <code>number</code>)</em> -
Distance to left content edge of the viewport.</p>
</li>
<li><p><code>right</code>
<em>(Type: <code>number</code>)</em> -
Distance to right content edge of the viewport.</p>
</li>
</ul>
<h4 id="parseplacement-placement-">parsePlacement(placement)</h4>
<p>Gets an array of placement values parsed from a placement string. Along with the 'auto' indicator, supported placement strings are:</p>
<ul>
<li>top: element on top, horizontally centered on host element.</li>
<li>top-left: element on top, left edge aligned with host element left edge.</li>
<li>top-right: element on top, right edge aligned with host element right edge.</li>
<li>bottom: element on bottom, horizontally centered on host element.</li>
<li>bottom-left: element on bottom, left edge aligned with host element left edge.</li>
<li>bottom-right: element on bottom, right edge aligned with host element right edge.</li>
<li>left: element on left, vertically centered on host element.</li>
<li>left-top: element on left, top edge aligned with host element top edge.</li>
<li>left-bottom: element on left, bottom edge aligned with host element bottom edge.</li>
<li>right: element on right, vertically centered on host element.</li>
<li>right-top: element on right, top edge aligned with host element top edge.</li>
<li>right-bottom: element on right, bottom edge aligned with host element bottom edge.</li>
</ul>
<p>A placement string with an 'auto' indicator is expected to be space separated from the placement, i.e: 'auto bottom-left'.
If the primary and secondary placement values do not match 'top, bottom, left, right' then 'top' will be the primary placement and
'center' will be the secondary placement.  If 'auto' is passed, true will be returned as the 3rd value of the array.</p>
<h5 id="parameters">parameters</h5>
<ul>
<li><code>placement</code>
<em>(Type: <code>string</code>, Example: <code>auto top-left</code>)</em> -
The placement string to parse.</li>
</ul>
<h5 id="returns">returns</h5>
<p>An array with the following values:</p>
<ul>
<li><p><code>[0]</code>
<em>(Type: <code>string</code>)</em> -
The primary placement.</p>
</li>
<li><p><code>[1]</code>
<em>(Type: <code>string</code>)</em> -
The secondary placement.</p>
</li>
<li><p><code>[2]</code>
<em>(Type: <code>boolean</code>)</em> -
Is auto place enabled.</p>
</li>
</ul>
<h4 id="positionelements-hostelement-targetelement-placement-appendtobody-">positionElements(hostElement, targetElement, placement, appendToBody)</h4>
<p>Gets gets coordinates for an element to be positioned relative to another element.</p>
<h5 id="parameters">parameters</h5>
<ul>
<li><p><code>hostElement</code>
<em>(Type: <code>element</code>)</em> -
The element to position against.</p>
</li>
<li><p><code>targetElement</code>
<em>(Type: <code>element</code>)</em> -
The element to position.</p>
</li>
<li><p><code>placement</code>
<em>(Type: <code>string</code>, Default: <code>top</code>, optional)</em> -
The placement for the target element.  See the parsePlacement() function for available options.  If 'auto' placement is used, the viewportOffset() function is used to decide where the targetElement will fit.</p>
</li>
<li><p><code>appendToBody</code>
<em>(Type: <code>boolean</code>, Default: <code>false</code>, optional)</em> -
Should the coordinates be cacluated from the body element.</p>
</li>
</ul>
<h5 id="returns">returns</h5>
<p>An object with the following properties:</p>
<ul>
<li><p><code>top</code>
<em>(Type: <code>number</code>)</em> -
The targetElement top value.</p>
</li>
<li><p><code>left</code>
<em>(Type: <code>number</code>)</em> -
The targetElement left value.</p>
</li>
<li><p><code>right</code>
<em>(Type: <code>number</code>)</em> -
The resolved placement with 'auto' removed.</p>
</li>
</ul>
<h4 id="positionarrow-element-placement-">positionArrow(element, placement)</h4>
<p>Positions the tooltip and popover arrow elements when using placement options beyond the standard top, left, bottom, or right.</p>
<h5 id="parameters">parameters</h5>
<ul>
<li><p><code>element</code>
<em>(Type: <code>element</code>)</em> -
The element to position the arrow element for.</p>
</li>
<li><p><code>placement</code>
<em>(Type: <code>string</code>)</em> -
The placement for the element.</p>
</li>
</ul>

                            </div>
                        </div>
                        <hr>
                        <div class="row code">
                            <div class="col-md-12" ng-controller="PlunkerCtrl">
                                <div class="pull-right">
                                    <button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.5.0', '3.3.6', '1.2.5', 'position')"><i class="glyphicon glyphicon-edit"></i> Edit in plunker</button>
                                </div>
                                <uib-tabset active="activeTab">
                                    <uib-tab index="0" heading="Markup">
                                        <div plunker-content="markup">
                                            <pre ng-non-bindable=""><code data-language="html" class="rainbow"><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">ng-controller</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">PositionDemoCtrl</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>$uibPosition service<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">id</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">posdemoparent</span><span class="string quote">"</span> <span class="support attribute">ng-style</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">{'overflow': (parentScrollable &amp;&amp; 'scroll'), 'position': (parentRelative &amp;&amp; 'relative')}</span><span class="string quote">"</span> <span class="support attribute">style</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">border: 1px solid #ccc; padding: 15px;</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">checkbox</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">input</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">checkbox</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">parentScrollable</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span> Parent scrollable
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">checkbox</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">input</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">checkbox</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">parentRelative</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span> Parent relative
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">id</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">posdemobtn</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-default</span><span class="string quote">"</span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">getValues()</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Get values<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>

    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">id</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">posdemodiv</span><span class="string quote">"</span> <span class="support attribute">style</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">width: 100px; height: 100px; margin: 15px 0; padding: 10px; background-color: #f8f8f8; border: 1px solid #ccc;</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      Demo element
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">br</span></span> <span class="support tag cclose">/&gt;</span>
  offsetParent: {{elemVals.offsetParent}}
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">br</span></span> <span class="support tag cclose">/&gt;</span>
  scrollParent: {{elemVals.scrollParent}}
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">br</span></span> <span class="support tag cclose">/&gt;</span>
  scrollbarWidth: {{scrollbarWidth}}
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">br</span></span> <span class="support tag cclose">/&gt;</span>
  position: {{elemVals.position}}
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">br</span></span> <span class="support tag cclose">/&gt;</span>
  offset: {{elemVals.offset}}
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">br</span></span> <span class="support tag cclose">/&gt;</span>
  viewportOffset: {{elemVals.viewportOffset}}
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">br</span></span> <span class="support tag cclose">/&gt;</span>
  positionElements: {{elemVals.positionElements}}
<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span></code></pre>
                                        </div>
                                    </uib-tab>
                                    <uib-tab index="1" heading="JavaScript">
                                        <div plunker-content="javascript">
                                            <pre ng-non-bindable=""><code data-language="javascript" class="rainbow">angular.<span class="function call">module</span>(<span class="string">'ui.bootstrap.demo'</span>).<span class="function call">controller</span>(<span class="string">'PositionDemoCtrl'</span>, <span class="storage function">function</span> ($scope, $<span class="support">window</span>, $uibPosition) {

    $scope.elemVals <span class="keyword operator">=</span> {};
    $scope.parentScrollable <span class="keyword operator">=</span> <span class="constant language">true</span>;
    $scope.parentRelative <span class="keyword operator">=</span> <span class="constant language">true</span>;

<span class="entity function">    $scope.getValues </span><span class="keyword operator">=</span> <span class="keyword">function</span>() {
      <span class="keyword">var</span> divEl <span class="keyword operator">=</span> $<span class="support">window</span>.<span class="support">document</span>.<span class="function call">querySelector</span>(<span class="string">'#posdemodiv'</span>);
      <span class="keyword">var</span> btnEl <span class="keyword operator">=</span> $<span class="support">window</span>.<span class="support">document</span>.<span class="function call">querySelector</span>(<span class="string">'#posdemobtn'</span>);

      <span class="keyword">var</span> offsetParent <span class="keyword operator">=</span> $uibPosition.<span class="function call">offsetParent</span>(divEl);
      $scope.elemVals.offsetParent <span class="keyword operator">=</span> <span class="string">'type: '</span> <span class="keyword operator">+</span> offsetParent.tagName <span class="keyword operator">+</span> <span class="string">', id: '</span> <span class="keyword operator">+</span> offsetParent.id;

      <span class="keyword">var</span> scrollParent <span class="keyword operator">=</span> $uibPosition.<span class="function call">scrollParent</span>(divEl);
      $scope.elemVals.scrollParent <span class="keyword operator">=</span> <span class="string">'type: '</span> <span class="keyword operator">+</span> scrollParent.tagName <span class="keyword operator">+</span> <span class="string">', id: '</span> <span class="keyword operator">+</span> scrollParent.id;

      $scope.scrollbarWidth <span class="keyword operator">=</span> $uibPosition.<span class="function call">scrollbarWidth</span>();

      $scope.elemVals.position <span class="keyword operator">=</span> $uibPosition.<span class="function call">position</span>(divEl);

      $scope.elemVals.offset <span class="keyword operator">=</span> $uibPosition.<span class="function call">offset</span>(divEl);

      $scope.elemVals.viewportOffset <span class="keyword operator">=</span> $uibPosition.<span class="function call">viewportOffset</span>(divEl);

      $scope.elemVals.positionElements <span class="keyword operator">=</span> $uibPosition.<span class="function call">positionElements</span>(btnEl, divEl, <span class="string">'auto bottom-left'</span>);
    };
});</code></pre>
                                        </div>
                                    </uib-tab>
                                </uib-tabset>
                            </div>
                        </div>
                    </section>
                    <script>angular.module('ui.bootstrap.demo').controller('PositionDemoCtrl', function ($scope, $window, $uibPosition) {

    $scope.elemVals = {};
    $scope.parentScrollable = true;
    $scope.parentRelative = true;

    $scope.getValues = function() {
      var divEl = $window.document.querySelector('#posdemodiv');
      var btnEl = $window.document.querySelector('#posdemobtn');

      var offsetParent = $uibPosition.offsetParent(divEl);
      $scope.elemVals.offsetParent = 'type: ' + offsetParent.tagName + ', id: ' + offsetParent.id;

      var scrollParent = $uibPosition.scrollParent(divEl);
      $scope.elemVals.scrollParent = 'type: ' + scrollParent.tagName + ', id: ' + scrollParent.id;

      $scope.scrollbarWidth = $uibPosition.scrollbarWidth();

      $scope.elemVals.position = $uibPosition.position(divEl);

      $scope.elemVals.offset = $uibPosition.offset(divEl);

      $scope.elemVals.viewportOffset = $uibPosition.viewportOffset(divEl);

      $scope.elemVals.positionElements = $uibPosition.positionElements(btnEl, divEl, 'auto bottom-left');
    };
});</script>
                
                    <section id="progressbar">
                        <div class="page-header">
                          <h1>Progressbar<small>
                              (<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/progressbar">ui.bootstrap.progressbar</a>)
                          </small></h1>
                          </div>
                          <div class="row">
                            <div class="col-md-6 show-grid">
                                <div ng-controller="ProgressDemoCtrl">

    <h3>Static</h3>
    <div class="row">
        <div class="col-sm-4"><uib-progressbar value="55"></uib-progressbar></div>
        <div class="col-sm-4"><uib-progressbar class="progress-striped" value="22" type="warning">22%</uib-progressbar></div>
        <div class="col-sm-4"><uib-progressbar class="progress-striped active" max="200" value="166" type="danger"><i>166 / 200</i></uib-progressbar></div>
    </div>

    <hr>
    <h3>Dynamic <button type="button" class="btn btn-sm btn-primary" ng-click="random()">Randomize</button></h3>
    <uib-progressbar max="max" value="dynamic"><span style="color:white; white-space:nowrap;">{{dynamic}} / {{max}}</span></uib-progressbar>
    
    <small><em>No animation</em></small>
    <uib-progressbar animate="false" value="dynamic" type="success"><b>{{dynamic}}%</b></uib-progressbar>

    <small><em>Object (changes type based on value)</em></small>
    <uib-progressbar class="progress-striped active" value="dynamic" type="{{type}}">{{type}} <i ng-show="showWarning">!!! Watch out !!!</i></uib-progressbar>
    
    <hr>
    <h3>Stacked <button type="button" class="btn btn-sm btn-primary" ng-click="randomStacked()">Randomize</button></h3>
    <uib-progress><uib-bar ng-repeat="bar in stacked track by $index" value="bar.value" type="{{bar.type}}"><span ng-hide="bar.value < 5">{{bar.value}}%</span></uib-bar></uib-progress>

</div>
                            </div>
                            <div class="col-md-6">
                                <p>A progress bar directive that is focused on providing feedback on the progress of a workflow or action.</p>
<p>It supports multiple (stacked) <code>&lt;uib-bar&gt;</code> into the same <code>&lt;uib-progress&gt;</code> element or a single <code>&lt;uib-progressbar&gt;</code> element with optional <code>max</code> attribute and transition animations.</p>
<h3 id="uib-progressbar-settings">uib-progressbar settings</h3>
<ul>
<li><p><code>value</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i> -
The current value of progress completed.</p>
</li>
<li><p><code>type</code>
<em>(Default: <code>null</code>)</em> -
Bootstrap style type. Possible values are 'success', 'info', 'warning', and, 'danger' to use Bootstrap's pre-existing styling, or any desired custom suffix.</p>
</li>
<li><p><code>max</code>
<small class="badge">$</small>
<small class="badge">C</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>100</code>)</em> -
A number that specifies the total value of bars that is required.</p>
</li>
<li><p><code>animate</code>
<small class="badge">$</small>
<small class="badge">C</small>
<em>(Default: <code>true</code>)</em> -
Whether bars use transitions to achieve the width change.</p>
</li>
<li><p><code>title</code>
<em>(Default: <code>progressbar</code>)</em> -
Title to use as label (for accessibility).</p>
</li>
</ul>
<h3 id="uib-progress-settings">uib-progress settings</h3>
<ul>
<li><p><code>max</code>
<small class="badge">$</small>
<small class="badge">C</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>100</code>)</em> -
A number that specifies the total value of bars that is required.</p>
</li>
<li><p><code>animate</code>
<small class="badge">$</small>
<small class="badge">C</small>
<em>(Default: <code>true</code>)</em> -
Whether bars use transitions to achieve the width change.</p>
</li>
<li><p><code>title</code>
<em>(Default: <code>progressbar</code>)</em> -
Title to use as label (for accessibility).</p>
</li>
</ul>
<h3 id="uib-bar-settings">uib-bar settings</h3>
<ul>
<li><p><code>value</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i> -
The current value of progress completed.</p>
</li>
<li><p><code>type</code>
<em>(Default: <code>null</code>)</em> -
Bootstrap style type. Possible values are 'success', 'info', 'warning', and, 'error' to use Bootstrap's pre-existing styling, or any desired custom suffix.</p>
</li>
<li><p><code>title</code>
<em>(Default: <code>progressbar</code>)</em> -
Title to use as label (for accessibility).</p>
</li>
</ul>

                            </div>
                        </div>
                        <hr>
                        <div class="row code">
                            <div class="col-md-12" ng-controller="PlunkerCtrl">
                                <div class="pull-right">
                                    <button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.5.0', '3.3.6', '1.2.5', 'progressbar')"><i class="glyphicon glyphicon-edit"></i> Edit in plunker</button>
                                </div>
                                <uib-tabset active="activeTab">
                                    <uib-tab index="0" heading="Markup">
                                        <div plunker-content="markup">
                                            <pre ng-non-bindable=""><code data-language="html" class="rainbow"><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">ng-controller</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">ProgressDemoCtrl</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>

    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h3</span></span><span class="support tag cclose">&gt;</span>Static<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h3</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">row</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">col-sm-4</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-progressbar <span class="support attribute">value</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">55</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-progressbar<span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">col-sm-4</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-progressbar <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">progress-striped</span><span class="string quote">"</span> <span class="support attribute">value</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">22</span><span class="string quote">"</span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">warning</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>22%<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-progressbar<span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">col-sm-4</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-progressbar <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">progress-striped active</span><span class="string quote">"</span> <span class="support attribute">max</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">200</span><span class="string quote">"</span> <span class="support attribute">value</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">166</span><span class="string quote">"</span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">danger</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">i</span></span><span class="support tag cclose">&gt;</span>166 / 200<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">i</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-progressbar<span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>

    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">hr</span></span> <span class="support tag cclose">/&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h3</span></span><span class="support tag cclose">&gt;</span>Dynamic <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-sm btn-primary</span><span class="string quote">"</span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">random()</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Randomize<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h3</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-progressbar <span class="support attribute">max</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">max</span><span class="string quote">"</span> <span class="support attribute">value</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">dynamic</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">span</span></span> <span class="support attribute">style</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">color:white; white-space:nowrap;</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>{{dynamic}} / {{max}}<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">span</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-progressbar<span class="support tag cclose">&gt;</span>
    
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">small</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">em</span></span><span class="support tag cclose">&gt;</span>No animation<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">em</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">small</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-progressbar <span class="support attribute">animate</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">false</span><span class="string quote">"</span> <span class="support attribute">value</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">dynamic</span><span class="string quote">"</span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">success</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">b</span></span><span class="support tag cclose">&gt;</span>{{dynamic}}%<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">b</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-progressbar<span class="support tag cclose">&gt;</span>

    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">small</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">em</span></span><span class="support tag cclose">&gt;</span>Object (changes type based on value)<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">em</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">small</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-progressbar <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">progress-striped active</span><span class="string quote">"</span> <span class="support attribute">value</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">dynamic</span><span class="string quote">"</span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">{{type}}</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>{{type}} <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">i</span></span> <span class="support attribute">ng-show</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">showWarning</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>!!! Watch out !!!<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">i</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-progressbar<span class="support tag cclose">&gt;</span>
    
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">hr</span></span> <span class="support tag cclose">/&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h3</span></span><span class="support tag cclose">&gt;</span>Stacked <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-sm btn-primary</span><span class="string quote">"</span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">randomStacked()</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Randomize<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h3</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-progress<span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-bar <span class="support attribute">ng-repeat</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">bar in stacked track by $index</span><span class="string quote">"</span> <span class="support attribute">value</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">bar.value</span><span class="string quote">"</span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">{{bar.type}}</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">span</span></span> <span class="support attribute">ng-hide</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">bar.value &lt; 5</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>{{bar.value}}%<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">span</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-bar<span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-progress<span class="support tag cclose">&gt;</span>

<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span></code></pre>
                                        </div>
                                    </uib-tab>
                                    <uib-tab index="1" heading="JavaScript">
                                        <div plunker-content="javascript">
                                            <pre ng-non-bindable=""><code data-language="javascript" class="rainbow">angular.<span class="function call">module</span>(<span class="string">'ui.bootstrap.demo'</span>).<span class="function call">controller</span>(<span class="string">'ProgressDemoCtrl'</span>, <span class="storage function">function</span> ($scope) {
  $scope.max <span class="keyword operator">=</span> <span class="constant numeric">200</span>;

<span class="entity function">  $scope.random </span><span class="keyword operator">=</span> <span class="keyword">function</span>() {
    <span class="keyword">var</span> value <span class="keyword operator">=</span> Math.<span class="function call">floor</span>(Math.<span class="function call">random</span>() <span class="keyword operator">*</span> <span class="constant numeric">100</span> <span class="keyword operator">+</span> <span class="constant numeric">1</span>);
    <span class="keyword">var</span> type;

    <span class="keyword">if</span> (value <span class="keyword operator">&lt;</span> <span class="constant numeric">25</span>) {
      type <span class="keyword operator">=</span> <span class="string">'success'</span>;
    } <span class="keyword">else</span> <span class="keyword">if</span> (value <span class="keyword operator">&lt;</span> <span class="constant numeric">50</span>) {
      type <span class="keyword operator">=</span> <span class="string">'info'</span>;
    } <span class="keyword">else</span> <span class="keyword">if</span> (value <span class="keyword operator">&lt;</span> <span class="constant numeric">75</span>) {
      type <span class="keyword operator">=</span> <span class="string">'warning'</span>;
    } <span class="keyword">else</span> {
      type <span class="keyword operator">=</span> <span class="string">'danger'</span>;
    }

    $scope.showWarning <span class="keyword operator">=</span> type <span class="keyword operator">=</span><span class="keyword operator">=</span><span class="keyword operator">=</span> <span class="string">'danger'</span> <span class="keyword operator">|</span><span class="keyword operator">|</span> type <span class="keyword operator">=</span><span class="keyword operator">=</span><span class="keyword operator">=</span> <span class="string">'warning'</span>;

    $scope.dynamic <span class="keyword operator">=</span> value;
    $scope.type <span class="keyword operator">=</span> type;
  };

  $scope.<span class="function call">random</span>();

<span class="entity function">  $scope.randomStacked </span><span class="keyword operator">=</span> <span class="keyword">function</span>() {
    $scope.stacked <span class="keyword operator">=</span> [];
    <span class="keyword">var</span> types <span class="keyword operator">=</span> [<span class="string">'success'</span>, <span class="string">'info'</span>, <span class="string">'warning'</span>, <span class="string">'danger'</span>];

    <span class="keyword">for</span> (<span class="keyword">var</span> i <span class="keyword operator">=</span> <span class="constant numeric">0</span>, n <span class="keyword operator">=</span> Math.<span class="function call">floor</span>(Math.<span class="function call">random</span>() <span class="keyword operator">*</span> <span class="constant numeric">4</span> <span class="keyword operator">+</span> <span class="constant numeric">1</span>); i <span class="keyword operator">&lt;</span> n; i<span class="keyword operator">+</span><span class="keyword operator">+</span>) {
        <span class="keyword">var</span> index <span class="keyword operator">=</span> Math.<span class="function call">floor</span>(Math.<span class="function call">random</span>() <span class="keyword operator">*</span> <span class="constant numeric">4</span>);
        $scope.stacked.<span class="support method">push</span>({
          value: Math.<span class="function call">floor</span>(Math.<span class="function call">random</span>() <span class="keyword operator">*</span> <span class="constant numeric">30</span> <span class="keyword operator">+</span> <span class="constant numeric">1</span>),
          type: types[index]
        });
    }
  };

  $scope.<span class="function call">randomStacked</span>();
});
</code></pre>
                                        </div>
                                    </uib-tab>
                                </uib-tabset>
                            </div>
                        </div>
                    </section>
                    <script>angular.module('ui.bootstrap.demo').controller('ProgressDemoCtrl', function ($scope) {
  $scope.max = 200;

  $scope.random = function() {
    var value = Math.floor(Math.random() * 100 + 1);
    var type;

    if (value < 25) {
      type = 'success';
    } else if (value < 50) {
      type = 'info';
    } else if (value < 75) {
      type = 'warning';
    } else {
      type = 'danger';
    }

    $scope.showWarning = type === 'danger' || type === 'warning';

    $scope.dynamic = value;
    $scope.type = type;
  };

  $scope.random();

  $scope.randomStacked = function() {
    $scope.stacked = [];
    var types = ['success', 'info', 'warning', 'danger'];

    for (var i = 0, n = Math.floor(Math.random() * 4 + 1); i < n; i++) {
        var index = Math.floor(Math.random() * 4);
        $scope.stacked.push({
          value: Math.floor(Math.random() * 30 + 1),
          type: types[index]
        });
    }
  };

  $scope.randomStacked();
});
</script>
                
                    <section id="rating">
                        <div class="page-header">
                          <h1>Rating<small>
                              (<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/rating">ui.bootstrap.rating</a>)
                          </small></h1>
                          </div>
                          <div class="row">
                            <div class="col-md-6 show-grid">
                                <div ng-controller="RatingDemoCtrl">
    <h4>Default</h4>
    <uib-rating ng-model="rate" max="max" read-only="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating"></uib-rating>
    <span class="label" ng-class="{'label-warning': percent<30, 'label-info': percent>=30 &amp;&amp; percent<70, 'label-success': percent>=70}" ng-show="overStar &amp;&amp; !isReadonly">{{percent}}%</span>

    <pre style="margin:15px 0;">Rate: <b>{{rate}}</b> - Readonly is: <i>{{isReadonly}}</i> - Hovering over: <b>{{overStar || "none"}}</b></pre>

    <button type="button" class="btn btn-sm btn-danger" ng-click="rate = 0" ng-disabled="isReadonly">Clear</button>
    <button type="button" class="btn btn-sm btn-default" ng-click="isReadonly = ! isReadonly">Toggle Readonly</button>
    <hr>

    <h4>Custom icons</h4>
    <div ng-init="x = 5"><uib-rating ng-model="x" max="15" state-on="'glyphicon-ok-sign'" state-off="'glyphicon-ok-circle'" aria-labelledby="custom-icons-1"></uib-rating> <b>(<i>Rate:</i> {{x}})</b></div>
    <div ng-init="y = 2"><uib-rating ng-model="y" rating-states="ratingStates" aria-labelledby="custom-icons-2"></uib-rating> <b>(<i>Rate:</i> {{y}})</b></div>
</div>

                            </div>
                            <div class="col-md-6">
                                <p>Rating directive that will take care of visualising a star rating bar.</p>
<h3 id="uib-rating-settings">uib-rating settings</h3>
<ul>
<li><p><code>max</code>
<small class="badge">$</small>
<small class="badge">C</small>
<em>(Default: <code>5</code>)</em> -
Changes the number of icons.</p>
</li>
<li><p><code>ng-model</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i> -
The current rate.</p>
</li>
<li><p><code>on-hover(value)</code>
<small class="badge">$</small> -
An optional expression called when user's mouse is over a particular icon.</p>
</li>
<li><p><code>on-leave()</code>
<small class="badge">$</small> -
An optional expression called when user's mouse leaves the control altogether.</p>
</li>
<li><p><code>rating-states</code>
<small class="badge">$</small>
<em>(Default: <code>null</code>)</em> -
An array of objects defining properties for all icons. In default template, <code>stateOn</code> &amp; <code>stateOff</code> property is used to specify the icon's class.</p>
</li>
<li><p><code>read-only</code>
<small class="badge">$</small>
<i class="icon-eye-open"></i>
<em>(Default: <code>false</code>)</em> -
Prevent user's interaction.</p>
</li>
<li><p><code>titles</code>
<small class="badge">$</small>
<small class="badge">C</small>
<em>(Default: ['one', 'two', 'three', 'four', 'five']`)</em> -
An array of strings defining titles for all icons.</p>
</li>
<li><p><code>enable-reset</code>
<small class="badge">$</small>
<em>(Default: <code>true</code>)</em> -
Clicking the icon of the current rating will reset the rating to 0.</p>
</li>
<li><p><code>state-off</code>
<small class="badge">$</small>
<small class="badge">C</small>
<em>(Default: <code>null</code>)</em> -
A variable used in the template to specify the state for unselected icons.</p>
</li>
<li><p><code>state-on</code>
<small class="badge">$</small>
<small class="badge">C</small>
<em>(Default: <code>null</code>)</em> -
   A variable used in the template to specify the state (class, src, etc) for selected icons.</p>
</li>
</ul>

                            </div>
                        </div>
                        <hr>
                        <div class="row code">
                            <div class="col-md-12" ng-controller="PlunkerCtrl">
                                <div class="pull-right">
                                    <button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.5.0', '3.3.6', '1.2.5', 'rating')"><i class="glyphicon glyphicon-edit"></i> Edit in plunker</button>
                                </div>
                                <uib-tabset active="activeTab">
                                    <uib-tab index="0" heading="Markup">
                                        <div plunker-content="markup">
                                            <pre ng-non-bindable=""><code data-language="html" class="rainbow"><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">ng-controller</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">RatingDemoCtrl</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>Default<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-rating <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">rate</span><span class="string quote">"</span> <span class="support attribute">max</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">max</span><span class="string quote">"</span> <span class="support attribute">read-only</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">isReadonly</span><span class="string quote">"</span> <span class="support attribute">on-hover</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">hoveringOver(value)</span><span class="string quote">"</span> <span class="support attribute">on-leave</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">overStar = null</span><span class="string quote">"</span> <span class="support attribute">titles</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">['one','two','three']</span><span class="string quote">"</span> <span class="support attribute">aria-labelledby</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">default-rating</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-rating<span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">span</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">label</span><span class="string quote">"</span> <span class="support attribute">ng-class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">{'label-warning': percent&lt;30, 'label-info': percent&gt;=30 &amp;&amp; percent&lt;70, 'label-success': percent&gt;=70}</span><span class="string quote">"</span> <span class="support attribute">ng-show</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">overStar &amp;&amp; !isReadonly</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>{{percent}}%<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">span</span></span><span class="support tag cclose">&gt;</span>

    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">pre</span></span> <span class="support attribute">style</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">margin:15px 0;</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Rate: <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">b</span></span><span class="support tag cclose">&gt;</span>{{rate}}<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">b</span></span><span class="support tag cclose">&gt;</span> - Readonly is: <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">i</span></span><span class="support tag cclose">&gt;</span>{{isReadonly}}<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">i</span></span><span class="support tag cclose">&gt;</span> - Hovering over: <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">b</span></span><span class="support tag cclose">&gt;</span>{{overStar || "none"}}<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">b</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">pre</span></span><span class="support tag cclose">&gt;</span>

    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-sm btn-danger</span><span class="string quote">"</span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">rate = 0</span><span class="string quote">"</span> <span class="support attribute">ng-disabled</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">isReadonly</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Clear<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-sm btn-default</span><span class="string quote">"</span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">isReadonly = ! isReadonly</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Toggle Readonly<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">hr</span></span> <span class="support tag cclose">/&gt;</span>

    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>Custom icons<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">ng-init</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">x = 5</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-rating <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">x</span><span class="string quote">"</span> <span class="support attribute">max</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">15</span><span class="string quote">"</span> <span class="support attribute">state-on</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">'glyphicon-ok-sign'</span><span class="string quote">"</span> <span class="support attribute">state-off</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">'glyphicon-ok-circle'</span><span class="string quote">"</span> <span class="support attribute">aria-labelledby</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">custom-icons-1</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-rating<span class="support tag cclose">&gt;</span> <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">b</span></span><span class="support tag cclose">&gt;</span>(<span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">i</span></span><span class="support tag cclose">&gt;</span>Rate:<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">i</span></span><span class="support tag cclose">&gt;</span> {{x}})<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">b</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">ng-init</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">y = 2</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-rating <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">y</span><span class="string quote">"</span> <span class="support attribute">rating-states</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">ratingStates</span><span class="string quote">"</span> <span class="support attribute">aria-labelledby</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">custom-icons-2</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-rating<span class="support tag cclose">&gt;</span> <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">b</span></span><span class="support tag cclose">&gt;</span>(<span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">i</span></span><span class="support tag cclose">&gt;</span>Rate:<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">i</span></span><span class="support tag cclose">&gt;</span> {{y}})<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">b</span></span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
</code></pre>
                                        </div>
                                    </uib-tab>
                                    <uib-tab index="1" heading="JavaScript">
                                        <div plunker-content="javascript">
                                            <pre ng-non-bindable=""><code data-language="javascript" class="rainbow">angular.<span class="function call">module</span>(<span class="string">'ui.bootstrap.demo'</span>).<span class="function call">controller</span>(<span class="string">'RatingDemoCtrl'</span>, <span class="storage function">function</span> ($scope) {
  $scope.rate <span class="keyword operator">=</span> <span class="constant numeric">7</span>;
  $scope.max <span class="keyword operator">=</span> <span class="constant numeric">10</span>;
  $scope.isReadonly <span class="keyword operator">=</span> <span class="constant language">false</span>;

<span class="entity function">  $scope.hoveringOver </span><span class="keyword operator">=</span> <span class="keyword">function</span>(value) {
    $scope.overStar <span class="keyword operator">=</span> value;
    $scope.percent <span class="keyword operator">=</span> <span class="constant numeric">100</span> <span class="keyword operator">*</span> (value / $scope.max);
  };

  $scope.ratingStates <span class="keyword operator">=</span> [
    {stateOn: <span class="string">'glyphicon-ok-sign'</span>, stateOff: <span class="string">'glyphicon-ok-circle'</span>},
    {stateOn: <span class="string">'glyphicon-star'</span>, stateOff: <span class="string">'glyphicon-star-empty'</span>},
    {stateOn: <span class="string">'glyphicon-heart'</span>, stateOff: <span class="string">'glyphicon-ban-circle'</span>},
    {stateOn: <span class="string">'glyphicon-heart'</span>},
    {stateOff: <span class="string">'glyphicon-off'</span>}
  ];
});
</code></pre>
                                        </div>
                                    </uib-tab>
                                </uib-tabset>
                            </div>
                        </div>
                    </section>
                    <script>angular.module('ui.bootstrap.demo').controller('RatingDemoCtrl', function ($scope) {
  $scope.rate = 7;
  $scope.max = 10;
  $scope.isReadonly = false;

  $scope.hoveringOver = function(value) {
    $scope.overStar = value;
    $scope.percent = 100 * (value / $scope.max);
  };

  $scope.ratingStates = [
    {stateOn: 'glyphicon-ok-sign', stateOff: 'glyphicon-ok-circle'},
    {stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty'},
    {stateOn: 'glyphicon-heart', stateOff: 'glyphicon-ban-circle'},
    {stateOn: 'glyphicon-heart'},
    {stateOff: 'glyphicon-off'}
  ];
});
</script>
                
                    <section id="tabs">
                        <div class="page-header">
                          <h1>Tabs<small>
                              (<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/tabs">ui.bootstrap.tabs</a>)
                          </small></h1>
                          </div>
                          <div class="row">
                            <div class="col-md-6 show-grid">
                                <style type="text/css">
  form.tab-form-demo .tab-pane {
    margin: 20px 20px;
  }
</style>

<div ng-controller="TabsDemoCtrl">
  <p>Select a tab by setting active binding to true:</p>
  <p>
    <button type="button" class="btn btn-default btn-sm" ng-click="active = 1">Select second tab</button>
    <button type="button" class="btn btn-default btn-sm" ng-click="active = 2">Select third tab</button>
  </p>
  <p>
    <button type="button" class="btn btn-default btn-sm" ng-click="tabs[1].disabled = ! tabs[1].disabled">Enable / Disable third tab</button>
  </p>
  <hr>

  <uib-tabset active="active">
    <uib-tab index="0" heading="Static title">Static content</uib-tab>
    <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
      {{tab.content}}
    </uib-tab>
    <uib-tab index="3" select="alertMe()">
      <uib-tab-heading>
        <i class="glyphicon glyphicon-bell"></i> Alert!
      </uib-tab-heading>
      I've got an HTML heading, and a select callback. Pretty cool!
    </uib-tab>
  </uib-tabset>

  <hr>

  <uib-tabset active="activePill" vertical="true" type="pills">
    <uib-tab index="0" heading="Vertical 1">Vertical content 1</uib-tab>
    <uib-tab index="1" heading="Vertical 2">Vertical content 2</uib-tab>
  </uib-tabset>

  <hr>

  <uib-tabset active="activeJustified" justified="true">
    <uib-tab index="0" heading="Justified">Justified content</uib-tab>
    <uib-tab index="1" heading="SJ">Short Labeled Justified content</uib-tab>
    <uib-tab index="2" heading="Long Justified">Long Labeled Justified content</uib-tab>
  </uib-tabset>

  <hr>

  Tabbed pills with CSS classes
  <uib-tabset type="pills">
    <uib-tab heading="Default Size">Tab 1 content</uib-tab>
    <uib-tab heading="Small Button" classes="btn-sm">Tab 2 content</uib-tab>
  </uib-tabset>

  <hr>

  Tabs using nested forms:
  <form name="outerForm" class="tab-form-demo">
    <uib-tabset active="activeForm">
      <uib-tab index="0" heading="Form Tab">
        <ng-form name="nestedForm">
          <div class="form-group">
            <label>Name</label>
            <input type="text" class="form-control" required="" ng-model="model.name">
          </div>
        </ng-form>
      </uib-tab>
      <uib-tab index="1" heading="Tab One">
        Some Tab Content
      </uib-tab>
      <uib-tab index="2" heading="Tab Two">
        More Tab Content
      </uib-tab>
    </uib-tabset>
  </form>
  Model:
  <pre>{{ model | json }}</pre>
  Nested Form:
  <pre>{{ outerForm.nestedForm | json }}</pre>
</div>

                            </div>
                            <div class="col-md-6">
                                <p>AngularJS version of the tabs directive.</p>
<h3 id="uib-tabset-settings">uib-tabset settings</h3>
<ul>
<li><p><code>active</code>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>Index of first tab</code>)</em> -
Active index of tab. Setting this to an existing tab index will make that tab active.</p>
</li>
<li><p><code>justified</code>
<small class="badge">$</small>
<em>(Default: <code>false</code>)</em> -
Whether tabs fill the container and have a consistent width.</p>
<ul>
<li><code>template-url</code>
<em>(Default: <code>uib/template/tabs/tabset.html</code>)</em> -
A URL representing the location of a template to use for the main component.</li>
</ul>
</li>
<li><p><code>type</code>
<em>(Defaults: <code>tabs</code>)</em> -
Navigation type. Possible values are 'tabs' and 'pills'.</p>
</li>
<li><p><code>vertical</code>
<small class="badge">$</small>
<em>(Default: <code>false</code>)</em> -
Whether tabs appear vertically stacked.</p>
</li>
</ul>
<h3 id="uib-tab-settings">uib-tab settings</h3>
<ul>
<li><p><code>classes</code>
<small class="badge">$</small> -
 An optional string of space-separated CSS classes.</p>
</li>
<li><p><code>deselect()</code>
<small class="badge">$</small> -
An optional expression called when tab is deactivated. Supports $event in template for expression.</p>
</li>
<li><p><code>disable</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>false</code>)</em> -
Whether tab is clickable and can be activated.</p>
</li>
<li><p><code>heading</code> -
Heading text.</p>
</li>
<li><p><code>index</code> -
Tab index. Must be unique.</p>
</li>
<li><p><code>select()</code>
<small class="badge">$</small> -
An optional expression called when tab is activated. Supports $event in template for expression.</p>
</li>
<li><p><code>template-url</code>
<em>(Default: <code>uib/template/tabs/tab.html</code>)</em> -
A URL representing the location of a template to use for the tab heading.</p>
</li>
</ul>
<h3 id="tabset-heading">Tabset heading</h3>
<p>Instead of the <code>heading</code> attribute on the <code>uib-tabset</code>, you can use an <code>uib-tab-heading</code> element inside a tabset that will be used as the tabset's header. There you can use HTML as well.</p>
<h3 id="known-issues">Known issues</h3>
<p>To use clickable elements within the tab, you have override the tab template to use div elements instead of anchor elements, and replicate the desired styles from Bootstrap's CSS. This is due to browsers interpreting anchor elements as the target of any click event, which triggers routing when certain elements such as buttons are nested inside the anchor element.</p>

                            </div>
                        </div>
                        <hr>
                        <div class="row code">
                            <div class="col-md-12" ng-controller="PlunkerCtrl">
                                <div class="pull-right">
                                    <button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.5.0', '3.3.6', '1.2.5', 'tabs')"><i class="glyphicon glyphicon-edit"></i> Edit in plunker</button>
                                </div>
                                <uib-tabset active="activeTab">
                                    <uib-tab index="0" heading="Markup">
                                        <div plunker-content="markup">
                                            <pre ng-non-bindable=""><code data-language="html" class="rainbow"><span class="source css embedded"><span class="keyword operator">&lt;</span>style type<span class="keyword operator">=</span><span class="string">"text/css"</span><span class="keyword operator">&gt;</span>
  form.tab<span class="keyword operator">-</span>form<span class="keyword operator">-</span>demo .tab<span class="keyword operator">-</span>pane {
    margin: 20px 20px;
  }
<span class="keyword operator">&lt;</span>/style<span class="keyword operator">&gt;</span></span>

<span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">ng-controller</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">TabsDemoCtrl</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">p</span></span><span class="support tag cclose">&gt;</span>Select a tab by setting active binding to true:<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">p</span></span><span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">p</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-default btn-sm</span><span class="string quote">"</span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">active = 1</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Select second tab<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-default btn-sm</span><span class="string quote">"</span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">active = 2</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Select third tab<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">p</span></span><span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">p</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-default btn-sm</span><span class="string quote">"</span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">tabs[1].disabled = ! tabs[1].disabled</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Enable / Disable third tab<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">p</span></span><span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">hr</span></span> <span class="support tag cclose">/&gt;</span>

  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-tabset <span class="support attribute">active</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">active</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-tab <span class="support attribute">index</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">0</span><span class="string quote">"</span> <span class="support attribute">heading</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">Static title</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Static content<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-tab<span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-tab <span class="support attribute">index</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">$index + 1</span><span class="string quote">"</span> <span class="support attribute">ng-repeat</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">tab in tabs</span><span class="string quote">"</span> <span class="support attribute">heading</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">{{tab.title}}</span><span class="string quote">"</span> <span class="support attribute">active</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">tab.active</span><span class="string quote">"</span> <span class="support attribute">disable</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">tab.disabled</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      {{tab.content}}
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-tab<span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-tab <span class="support attribute">index</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">3</span><span class="string quote">"</span> <span class="support attribute">select</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">alertMe()</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-tab-heading<span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">i</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">glyphicon glyphicon-bell</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">i</span></span><span class="support tag cclose">&gt;</span> Alert!
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-tab-heading<span class="support tag cclose">&gt;</span>
      I've got an HTML heading, and a select callback. Pretty cool!
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-tab<span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-tabset<span class="support tag cclose">&gt;</span>

  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">hr</span></span> <span class="support tag cclose">/&gt;</span>

  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-tabset <span class="support attribute">active</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">activePill</span><span class="string quote">"</span> <span class="support attribute">vertical</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">true</span><span class="string quote">"</span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">pills</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-tab <span class="support attribute">index</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">0</span><span class="string quote">"</span> <span class="support attribute">heading</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">Vertical 1</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Vertical content 1<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-tab<span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-tab <span class="support attribute">index</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">1</span><span class="string quote">"</span> <span class="support attribute">heading</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">Vertical 2</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Vertical content 2<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-tab<span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-tabset<span class="support tag cclose">&gt;</span>

  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">hr</span></span> <span class="support tag cclose">/&gt;</span>

  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-tabset <span class="support attribute">active</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">activeJustified</span><span class="string quote">"</span> <span class="support attribute">justified</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">true</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-tab <span class="support attribute">index</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">0</span><span class="string quote">"</span> <span class="support attribute">heading</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">Justified</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Justified content<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-tab<span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-tab <span class="support attribute">index</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">1</span><span class="string quote">"</span> <span class="support attribute">heading</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">SJ</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Short Labeled Justified content<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-tab<span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-tab <span class="support attribute">index</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">2</span><span class="string quote">"</span> <span class="support attribute">heading</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">Long Justified</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Long Labeled Justified content<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-tab<span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-tabset<span class="support tag cclose">&gt;</span>

  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">hr</span></span> <span class="support tag cclose">/&gt;</span>

  Tabbed pills with CSS classes
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-tabset <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">pills</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-tab <span class="support attribute">heading</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">Default Size</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Tab 1 content<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-tab<span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-tab <span class="support attribute">heading</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">Small Button</span><span class="string quote">"</span> <span class="support attribute">classes</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn-sm</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Tab 2 content<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-tab<span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-tabset<span class="support tag cclose">&gt;</span>

  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">hr</span></span> <span class="support tag cclose">/&gt;</span>

  Tabs using nested forms:
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">form</span></span> <span class="support attribute">name</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">outerForm</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">tab-form-demo</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-tabset <span class="support attribute">active</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">activeForm</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-tab <span class="support attribute">index</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">0</span><span class="string quote">"</span> <span class="support attribute">heading</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">Form Tab</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">ng</span></span>-form <span class="support attribute">name</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">nestedForm</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
          <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-group</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
            <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>Name<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>
            <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">input</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">text</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-control</span><span class="string quote">"</span> required <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">model.name</span><span class="string quote">"</span><span class="support tag cclose">/&gt;</span>
          <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">ng</span></span>-form<span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-tab<span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-tab <span class="support attribute">index</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">1</span><span class="string quote">"</span> <span class="support attribute">heading</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">Tab One</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
        Some Tab Content
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-tab<span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-tab <span class="support attribute">index</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">2</span><span class="string quote">"</span> <span class="support attribute">heading</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">Tab Two</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
        More Tab Content
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-tab<span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-tabset<span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">form</span></span><span class="support tag cclose">&gt;</span>
  Model:
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">pre</span></span><span class="support tag cclose">&gt;</span>{{ model | json }}<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">pre</span></span><span class="support tag cclose">&gt;</span>
  Nested Form:
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">pre</span></span><span class="support tag cclose">&gt;</span>{{ outerForm.nestedForm | json }}<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">pre</span></span><span class="support tag cclose">&gt;</span>
<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
</code></pre>
                                        </div>
                                    </uib-tab>
                                    <uib-tab index="1" heading="JavaScript">
                                        <div plunker-content="javascript">
                                            <pre ng-non-bindable=""><code data-language="javascript" class="rainbow">angular.<span class="function call">module</span>(<span class="string">'ui.bootstrap.demo'</span>).<span class="function call">controller</span>(<span class="string">'TabsDemoCtrl'</span>, <span class="storage function">function</span> ($scope, $<span class="support">window</span>) {
  $scope.tabs <span class="keyword operator">=</span> [
    { title:<span class="string">'Dynamic Title 1'</span>, content:<span class="string">'Dynamic content 1'</span> },
    { title:<span class="string">'Dynamic Title 2'</span>, content:<span class="string">'Dynamic content 2'</span>, disabled: <span class="constant language">true</span> }
  ];

<span class="entity function">  $scope.alertMe </span><span class="keyword operator">=</span> <span class="keyword">function</span>() {
    <span class="support function">setTimeout</span>(<span class="keyword">function</span>() {
      $<span class="support">window</span>.<span class="function call">alert</span>(<span class="string">'You<span class="constant character escape">\'</span>ve selected the alert tab!'</span>);
    });
  };

  $scope.model <span class="keyword operator">=</span> {
    name: <span class="string">'Tabs'</span>
  };
});
</code></pre>
                                        </div>
                                    </uib-tab>
                                </uib-tabset>
                            </div>
                        </div>
                    </section>
                    <script>angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope, $window) {
  $scope.tabs = [
    { title:'Dynamic Title 1', content:'Dynamic content 1' },
    { title:'Dynamic Title 2', content:'Dynamic content 2', disabled: true }
  ];

  $scope.alertMe = function() {
    setTimeout(function() {
      $window.alert('You\'ve selected the alert tab!');
    });
  };

  $scope.model = {
    name: 'Tabs'
  };
});
</script>
                
                    <section id="timepicker">
                        <div class="page-header">
                          <h1>Timepicker<small>
                              (<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/timepicker">ui.bootstrap.timepicker</a>)
                          </small></h1>
                          </div>
                          <div class="row">
                            <div class="col-md-6 show-grid">
                                <div ng-controller="TimepickerDemoCtrl">

  <uib-timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></uib-timepicker>

  <pre class="alert alert-info">Time is: {{mytime | date:'shortTime' }}</pre>

  <div class="row"> 
    <div class="col-xs-6">
        Hours step is:
      <select class="form-control" ng-model="hstep" ng-options="opt for opt in options.hstep"></select>
    </div>
    <div class="col-xs-6">
        Minutes step is:
      <select class="form-control" ng-model="mstep" ng-options="opt for opt in options.mstep"></select>
    </div>
  </div>

  <hr>

  <button type="button" class="btn btn-info" ng-click="toggleMode()">12H / 24H</button>
  <button type="button" class="btn btn-default" ng-click="update()">Set to 14:00</button>
  <button type="button" class="btn btn-danger" ng-click="clear()">Clear</button>

</div>

                            </div>
                            <div class="col-md-6">
                                <p>A lightweight &amp; configurable timepicker directive.</p>
<h3 id="uib-timepicker-settings">uib-timepicker settings</h3>
<ul>
<li><p><code>arrowkeys</code>
<small class="badge">$</small>
<small class="badge">C</small>
<em>(Default: <code>true</code>)</em> -
Whether user can use up/down arrow keys inside the hours &amp; minutes input to increase or decrease its values.</p>
</li>
<li><p><code>hour-step</code>
<small class="badge">$</small>
<small class="badge">C</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>1</code>)</em> -
Number of hours to increase or decrease when using a button.</p>
</li>
<li><p><code>max</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>undefined</code>)</em> -
Maximum time a user can select.</p>
</li>
<li><p><code>meridians</code>
<small class="badge">$</small>
<small class="badge">C</small>
<em>(Default: <code>null</code>)</em> -
Meridian labels based on locale. To override you must supply an array like <code>['AM', 'PM']</code>.</p>
</li>
<li><p><code>min</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>undefined</code>)</em> -
Minimum time a user can select</p>
</li>
<li><p><code>minute-step</code>
<small class="badge">$</small>
<small class="badge">C</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>1</code>)</em> -
Number of minutes to increase or decrease when using a button.</p>
</li>
<li><p><code>mousewheel</code>
<small class="badge">$</small>
<small class="badge">C</small>
<em>(Default: <code>true</code>)</em> -
Whether user can scroll inside the hours &amp; minutes input to increase or decrease its values.</p>
</li>
<li><p><code>ng-disabled</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>false</code>)</em> -
Whether or not to disable the component.</p>
</li>
<li><p><code>ng-model</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i> -
Date object that provides the time state.</p>
</li>
<li><p><code>pad-hours</code>
<small class="badge">$</small>
<em>(Default: true)</em> -
Whether the hours column is padded with a 0.</p>
</li>
<li><p><code>readonly-input</code>
<small class="badge">$</small>
<small class="badge">C</small>
<em>(Default: <code>false</code>)</em> -
Whether user can type inside the hours &amp; minutes input.</p>
</li>
<li><p><code>second-step</code>
<small class="badge">$</small>
<small class="badge">C</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>1</code>)</em> -
Number of seconds to increase or decrease when using a button.</p>
</li>
<li><p><code>show-meridian</code>
<small class="badge">$</small>
<small class="badge">C</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>true</code>)</em> -
Whether to display 12H or 24H mode.</p>
</li>
<li><p><code>show-seconds</code>
<small class="badge">$</small>
<small class="badge">C</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>false</code>)</em> -
Show seconds input.</p>
</li>
<li><p><code>show-spinners</code>
<small class="badge">$</small>
<small class="badge">C</small>
<em>(Default: <code>true</code>)</em> -
Show spinner arrows above and below the inputs.</p>
</li>
<li><p><code>tabindex</code>
<em>(Defaults: <code>0</code>)</em> -
Sets tabindex for each control in the timepicker.</p>
</li>
<li><p><code>template-url</code>
<small class="badge">C</small>
<em>(Defaults: <code>uib/template/timepicker/timepicker.html</code>)</em> -
Add the ability to override the template used on the component.</p>
<p><strong>Notes</strong></p>
<p>If the model value is updated (i.e. via <code>Date.prototype.setDate</code>), you must update the model value by breaking the reference by <code>modelValue = new Date(modelValue)</code> in order to have the timepicker update.</p>
</li>
</ul>

                            </div>
                        </div>
                        <hr>
                        <div class="row code">
                            <div class="col-md-12" ng-controller="PlunkerCtrl">
                                <div class="pull-right">
                                    <button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.5.0', '3.3.6', '1.2.5', 'timepicker')"><i class="glyphicon glyphicon-edit"></i> Edit in plunker</button>
                                </div>
                                <uib-tabset active="activeTab">
                                    <uib-tab index="0" heading="Markup">
                                        <div plunker-content="markup">
                                            <pre ng-non-bindable=""><code data-language="html" class="rainbow"><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">ng-controller</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">TimepickerDemoCtrl</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>

  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">uib</span></span>-timepicker <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">mytime</span><span class="string quote">"</span> <span class="support attribute">ng-change</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">changed()</span><span class="string quote">"</span> <span class="support attribute">hour-step</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">hstep</span><span class="string quote">"</span> <span class="support attribute">minute-step</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">mstep</span><span class="string quote">"</span> <span class="support attribute">show-meridian</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">ismeridian</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">uib</span></span>-timepicker<span class="support tag cclose">&gt;</span>

  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">pre</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">alert alert-info</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Time is: {{mytime | date:'shortTime' }}<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">pre</span></span><span class="support tag cclose">&gt;</span>

  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">row</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span> 
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">col-xs-6</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
        Hours step is:
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">select</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-control</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">hstep</span><span class="string quote">"</span> <span class="support attribute">ng-options</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">opt for opt in options.hstep</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">select</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">col-xs-6</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
        Minutes step is:
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">select</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-control</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">mstep</span><span class="string quote">"</span> <span class="support attribute">ng-options</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">opt for opt in options.mstep</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">select</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>

  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">hr</span></span><span class="support tag cclose">&gt;</span>

  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-info</span><span class="string quote">"</span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">toggleMode()</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>12H / 24H<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-default</span><span class="string quote">"</span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">update()</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Set to 14:00<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-danger</span><span class="string quote">"</span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">clear()</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Clear<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>

<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
</code></pre>
                                        </div>
                                    </uib-tab>
                                    <uib-tab index="1" heading="JavaScript">
                                        <div plunker-content="javascript">
                                            <pre ng-non-bindable=""><code data-language="javascript" class="rainbow">angular.<span class="function call">module</span>(<span class="string">'ui.bootstrap.demo'</span>).<span class="function call">controller</span>(<span class="string">'TimepickerDemoCtrl'</span>, <span class="storage function">function</span> ($scope, $log) {
  $scope.mytime <span class="keyword operator">=</span> <span class="keyword">new</span> <span class="entity function">Date</span>();

  $scope.hstep <span class="keyword operator">=</span> <span class="constant numeric">1</span>;
  $scope.mstep <span class="keyword operator">=</span> <span class="constant numeric">15</span>;

  $scope.options <span class="keyword operator">=</span> {
    hstep: [<span class="constant numeric">1</span>, <span class="constant numeric">2</span>, <span class="constant numeric">3</span>],
    mstep: [<span class="constant numeric">1</span>, <span class="constant numeric">5</span>, <span class="constant numeric">10</span>, <span class="constant numeric">15</span>, <span class="constant numeric">25</span>, <span class="constant numeric">30</span>]
  };

  $scope.ismeridian <span class="keyword operator">=</span> <span class="constant language">true</span>;
<span class="entity function">  $scope.toggleMode </span><span class="keyword operator">=</span> <span class="keyword">function</span>() {
    $scope.ismeridian <span class="keyword operator">=</span> <span class="keyword operator">!</span> $scope.ismeridian;
  };

<span class="entity function">  $scope.update </span><span class="keyword operator">=</span> <span class="keyword">function</span>() {
    <span class="keyword">var</span> d <span class="keyword operator">=</span> <span class="keyword">new</span> <span class="entity function">Date</span>();
    d.<span class="function call">setHours</span>( <span class="constant numeric">14</span> );
    d.<span class="function call">setMinutes</span>( <span class="constant numeric">0</span> );
    $scope.mytime <span class="keyword operator">=</span> d;
  };

  $scope.changed <span class="keyword operator">=</span> <span class="storage function">function</span> () {
    $log.<span class="support method">log</span>(<span class="string">'Time changed to: '</span> <span class="keyword operator">+</span> $scope.mytime);
  };

<span class="entity function">  $scope.clear </span><span class="keyword operator">=</span> <span class="keyword">function</span>() {
    $scope.mytime <span class="keyword operator">=</span> <span class="constant language">null</span>;
  };
});
</code></pre>
                                        </div>
                                    </uib-tab>
                                </uib-tabset>
                            </div>
                        </div>
                    </section>
                    <script>angular.module('ui.bootstrap.demo').controller('TimepickerDemoCtrl', function ($scope, $log) {
  $scope.mytime = new Date();

  $scope.hstep = 1;
  $scope.mstep = 15;

  $scope.options = {
    hstep: [1, 2, 3],
    mstep: [1, 5, 10, 15, 25, 30]
  };

  $scope.ismeridian = true;
  $scope.toggleMode = function() {
    $scope.ismeridian = ! $scope.ismeridian;
  };

  $scope.update = function() {
    var d = new Date();
    d.setHours( 14 );
    d.setMinutes( 0 );
    $scope.mytime = d;
  };

  $scope.changed = function () {
    $log.log('Time changed to: ' + $scope.mytime);
  };

  $scope.clear = function() {
    $scope.mytime = null;
  };
});
</script>
                
                    <section id="tooltip">
                        <div class="page-header">
                          <h1>Tooltip<small>
                              (<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/tooltip">ui.bootstrap.tooltip</a>)
                          </small></h1>
                          </div>
                          <div class="row">
                            <div class="col-md-6 show-grid">
                                <div ng-controller="TooltipDemoCtrl">
    <div class="form-group">
      <label>Tooltip placement</label>
      <select class="form-control" ng-model="placement.selected" ng-options="o as o for o in placement.options"></select>
    </div>
    <button tooltip-placement="{{placement.selected}}" uib-tooltip="On the {{placement.selected}}" type="button" class="btn btn-default">Tooltip {{placement.selected}}</button>

    <hr>
    <div class="form-group">
      <label>Dynamic Tooltip Text</label>
      <input type="text" ng-model="dynamicTooltipText" class="form-control">
    </div>
    <div class="form-group">
      <label>Dynamic Tooltip Popup Text</label>
      <input type="text" ng-model="dynamicTooltip" class="form-control">
    </div>
    <p>
      Pellentesque <a href="#" uib-tooltip="{{dynamicTooltip}}">{{dynamicTooltipText}}</a>,
      sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in
      aliquam. Tincidunt lobortis feugiat vivamus at
      <a href="#" tooltip-animation="false" uib-tooltip="I don't fade. :-(">fading</a>
      eget arcu dictum varius duis at consectetur lorem. Vitae elementum curabitur
      <a href="#" tooltip-popup-delay="1000" uib-tooltip="appears with delay">show delay</a>
      nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas
      <a href="#" tooltip-popup-close-delay="1000" uib-tooltip="hides with delay">hide delay</a>
      pharetra convallis posuere morbi leo urna,
      <a href="#" uib-tooltip-template="'myTooltipTemplate.html'">Custom template</a>
      at elementum eu, facilisis sed odio morbi quis commodo odio.
    </p>

    <p>
        I can even contain HTML. <a href="#" uib-tooltip-html="htmlTooltip">Check me out!</a>
    </p>

    <p>
      <style>
        /* Specify styling for tooltip contents */
        .tooltip.customClass .tooltip-inner {
          color: #880000;
          background-color: #ffff66;
          box-shadow: 0 6px 12px rgba(0,0,0,.175);
        }
        /* Hide arrow */
        .tooltip.customClass .tooltip-arrow {
          display: none;
        }
      </style>
      I can have a custom class. <a href="#" uib-tooltip="I can have a custom class applied to me!" tooltip-class="customClass">Check me out!</a>
    </p>


    <div class="form-group">
      <label>Or use custom triggers, like focus: </label>
      <input type="text" value="Click me!" uib-tooltip="See? Now click away..." tooltip-trigger="focus" tooltip-placement="right" class="form-control">
    </div>

    <div class="form-group" ng-class="{'has-error' : !inputModel}">
      <label>Disable tooltips conditionally:</label>
      <input type="text" ng-model="inputModel" class="form-control" placeholder="Hover over this for a tooltip until this is filled" uib-tooltip="Enter something in this input field to disable this tooltip" tooltip-placement="top" tooltip-trigger="mouseenter" tooltip-enable="!inputModel">
    </div>
    <div class="form-group">
      <label>
        Open tooltips <span uib-tooltip="Hello!" tooltip-is-open="tooltipIsOpen" tooltip-placement="bottom">conditionally.</span>
      </label>
      <button ng-click="tooltipIsOpen = !tooltipIsOpen">Toggle tooltip</button>
    </div>
    <script type="text/ng-template" id="myTooltipTemplate.html">
      <span>Special Tooltip with <strong>markup</strong> and {{ dynamicTooltipText }}</span>
    </script>
</div>

                            </div>
                            <div class="col-md-6">
                                <p>A lightweight, extensible directive for fancy tooltip creation. The tooltip
directive supports multiple placements, optional transition animation, and more.</p>
<p><strong>Note to mobile developers</strong>:  Please note that while tooltips may work correctly on mobile devices (including tablets),
  we have made the decision to not officially support such a use-case because it does not make sense from a UX perspective.</p>
<p>There are three versions of the tooltip: <code>uib-tooltip</code>, <code>uib-tooltip-template</code>, and
<code>uib-tooltip-html</code>:</p>
<ul>
<li><code>uib-tooltip</code> -
Takes text only and will escape any HTML provided.</li>
<li><code>uib-tooltip-html</code>
<small class="badge">$</small> -
Takes an expression that evaluates to an HTML string. Note that this HTML is not compiled. If compilation is required, please use the <code>uib-tooltip-template</code> attribute option instead. <em>The user is responsible for ensuring the content is safe to put into the DOM!</em></li>
<li><code>uib-tooltip-template</code>
<small class="badge">$</small> -
Takes text that specifies the location of a template to use for the tooltip. Note that this needs to be wrapped in a tag.</li>
</ul>
<h3 id="uib-tooltip-settings">uib-tooltip-* settings</h3>
<p>All these settings are available for the three types of tooltips.</p>
<ul>
<li><p><code>tooltip-animation</code>
<small class="badge">$</small>
<small class="badge">C</small>
<em>(Default: <code>true</code>, Config: <code>animation</code>)</em> -
Should it fade in and out?</p>
</li>
<li><p><code>tooltip-append-to-body</code>
<small class="badge">$</small>
<small class="badge">C</small>
<em>(Default: <code>false</code>, Config: <code>appendToBody</code>)</em> -
Should the tooltip be appended to '$body' instead of the parent element?</p>
</li>
<li><p><code>tooltip-class</code> -
Custom class to be applied to the tooltip.</p>
</li>
<li><p><code>tooltip-enable</code>
<small class="badge">$</small>
<em>(Default: <code>true</code>)</em> -
Is it enabled? It will enable or disable the configured tooltip-trigger.</p>
</li>
<li><p><code>tooltip-is-open</code>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>false</code>)</em> -
Whether to show the tooltip.</p>
</li>
<li><p><code>tooltip-placement</code>
<small class="badge">C</small>
<em>(Default: <code>top</code>, Config: <code>placement</code>)</em> -
Passing in 'auto' separated by a space before the placement will enable auto positioning, e.g: "auto bottom-left". The tooltip will attempt to position where it fits in the closest scrollable ancestor. Accepts:</p>
<ul>
<li><code>top</code> - tooltip on top, horizontally centered on host element.</li>
<li><code>top-left</code> - tooltip on top, left edge aligned with host element left edge.</li>
<li><code>top-right</code> - tooltip on top, right edge aligned with host element right edge.</li>
<li><code>bottom</code> - tooltip on bottom, horizontally centered on host element.</li>
<li><code>bottom-left</code> - tooltip on bottom, left edge aligned with host element left edge.</li>
<li><code>bottom-right</code> - tooltip on bottom, right edge aligned with host element right edge.</li>
<li><code>left</code> - tooltip on left, vertically centered on host element.</li>
<li><code>left-top</code> - tooltip on left, top edge aligned with host element top edge.</li>
<li><code>left-bottom</code> - tooltip on left, bottom edge aligned with host element bottom edge.</li>
<li><code>right</code> - tooltip on right, vertically centered on host element.</li>
<li><code>right-top</code> - tooltip on right, top edge aligned with host element top edge.</li>
<li><code>right-bottom</code> - tooltip on right, bottom edge aligned with host element bottom edge.</li>
</ul>
</li>
<li><p><code>tooltip-popup-close-delay</code>
<small class="badge">C</small>
<em>(Default: <code>0</code>, Config: <code>popupCloseDelay</code>)</em> -
For how long should the tooltip remain open after the close trigger event?</p>
</li>
<li><p><code>tooltip-popup-delay</code>
<small class="badge">C</small>
<em>(Default: <code>0</code>, Config: <code>popupDelay</code>)</em> -
Popup delay in milliseconds until it opens.</p>
</li>
<li><p><code>tooltip-trigger</code>
<em>(Default: <code>mouseenter</code>)</em> -
What should trigger a show of the tooltip? Supports a space separated list of event names (see below).</p>
</li>
</ul>
<p><strong>Note:</strong> To configure the tooltips, you need to do it on <code>$uibTooltipProvider</code> (also see below).</p>
<h3 id="triggers">Triggers</h3>
<p>The following show triggers are supported out of the box, along with their provided hide triggers:</p>
<ul>
<li><code>mouseenter</code>: <code>mouseleave</code></li>
<li><code>click</code>: <code>click</code></li>
<li><code>outsideClick</code>: <code>outsideClick</code></li>
<li><code>focus</code>: <code>blur</code></li>
<li><code>none</code></li>
</ul>
<p>The <code>outsideClick</code> trigger will cause the tooltip to toggle on click, and hide when anything else is clicked.</p>
<p>For any non-supported value, the trigger will be used to both show and hide the
tooltip. Using the 'none' trigger will disable the internal trigger(s), one can
then use the <code>tooltip-is-open</code> attribute exclusively to show and hide the tooltip.</p>
<h3 id="-uibtooltipprovider">$uibTooltipProvider</h3>
<p>Through the <code>$uibTooltipProvider</code>, you can change the way tooltips and popovers
behave by default; the attributes above always take precedence. The following
methods are available:</p>
<ul>
<li><p><code>setTriggers(obj)</code>
<em>(Example: <code>{ 'openTrigger': 'closeTrigger' }</code>)</em> -
Extends the default trigger mappings mentioned above with mappings of your own.</p>
</li>
<li><p><code>options(obj)</code> -
Provide a set of defaults for certain tooltip and popover attributes. Currently supports the ones with the <small class="badge">C</small> badge.</p>
</li>
</ul>
<h3 id="known-issues">Known issues</h3>
<p>For Safari 7+ support, if you want to use the <strong>focus</strong> <code>tooltip-trigger</code>, you need to use an anchor tag with a tab index. For example:</p>
<pre><code>&lt;a tabindex="0" uib-tooltip="Test" tooltip-trigger="focus" class="btn btn-default"&gt;
  Click Me
&lt;/a&gt;
</code></pre>
                            </div>
                        </div>
                        <hr>
                        <div class="row code">
                            <div class="col-md-12" ng-controller="PlunkerCtrl">
                                <div class="pull-right">
                                    <button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.5.0', '3.3.6', '1.2.5', 'tooltip')"><i class="glyphicon glyphicon-edit"></i> Edit in plunker</button>
                                </div>
                                <uib-tabset active="activeTab">
                                    <uib-tab index="0" heading="Markup">
                                        <div plunker-content="markup">
                                            <pre ng-non-bindable=""><code data-language="html" class="rainbow"><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">ng-controller</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">TooltipDemoCtrl</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-group</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>Tooltip placement<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">select</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-control</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">placement.selected</span><span class="string quote">"</span> <span class="support attribute">ng-options</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">o as o for o in placement.options</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">select</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">tooltip-placement</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">{{placement.selected}}</span><span class="string quote">"</span> <span class="support attribute">uib-tooltip</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">On the {{placement.selected}}</span><span class="string quote">"</span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">button</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">btn btn-default</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Tooltip {{placement.selected}}<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>

    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">hr</span></span> <span class="support tag cclose">/&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-group</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>Dynamic Tooltip Text<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">input</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">text</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">dynamicTooltipText</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-control</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-group</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>Dynamic Tooltip Popup Text<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">input</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">text</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">dynamicTooltip</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-control</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">p</span></span><span class="support tag cclose">&gt;</span>
      Pellentesque <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span> <span class="support attribute">uib-tooltip</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">{{dynamicTooltip}}</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>{{dynamicTooltipText}}<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span>,
      sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in
      aliquam. Tincidunt lobortis feugiat vivamus at
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span> <span class="support attribute">tooltip-animation</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">false</span><span class="string quote">"</span> <span class="support attribute">uib-tooltip</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">I don't fade. :-(</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>fading<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span>
      eget arcu dictum varius duis at consectetur lorem. Vitae elementum curabitur
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span> <span class="support attribute">tooltip-popup-delay</span><span class="support operator">=</span><span class="string quote">'</span><span class="string value">1000</span><span class="string quote">'</span> <span class="support attribute">uib-tooltip</span><span class="support operator">=</span><span class="string quote">'</span><span class="string value">appears with delay</span><span class="string quote">'</span><span class="support tag cclose">&gt;</span>show delay<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span>
      nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span> <span class="support attribute">tooltip-popup-close-delay</span><span class="support operator">=</span><span class="string quote">'</span><span class="string value">1000</span><span class="string quote">'</span> <span class="support attribute">uib-tooltip</span><span class="support operator">=</span><span class="string quote">'</span><span class="string value">hides with delay</span><span class="string quote">'</span><span class="support tag cclose">&gt;</span>hide delay<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span>
      pharetra convallis posuere morbi leo urna,
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span> <span class="support attribute">uib-tooltip-template</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">'myTooltipTemplate.html'</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Custom template<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span>
      at elementum eu, facilisis sed odio morbi quis commodo odio.
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">p</span></span><span class="support tag cclose">&gt;</span>

    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">p</span></span><span class="support tag cclose">&gt;</span>
        I can even contain HTML. <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span> <span class="support attribute">uib-tooltip-html</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">htmlTooltip</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Check me out!<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">p</span></span><span class="support tag cclose">&gt;</span>

    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">p</span></span><span class="support tag cclose">&gt;</span>
      <span class="source css embedded"><span class="keyword operator">&lt;</span>style<span class="keyword operator">&gt;</span>
        <span class="comment">/* Specify styling for tooltip contents */</span>
        .tooltip.customClass .tooltip<span class="keyword operator">-</span>inner {
          color: <span class="comment">#880000;</span>
          background<span class="keyword operator">-</span>color: <span class="comment">#ffff66;</span>
          box<span class="keyword operator">-</span>shadow: <span class="constant numeric">0</span> 6px 12px <span class="function call">rgba</span>(<span class="constant numeric">0</span>,<span class="constant numeric">0</span>,<span class="constant numeric">0</span>,.<span class="constant numeric">175</span>);
        }
        <span class="comment">/* Hide arrow */</span>
        .tooltip.customClass .tooltip<span class="keyword operator">-</span>arrow {
          display: none;
        }
      <span class="keyword operator">&lt;</span>/style<span class="keyword operator">&gt;</span></span>
      I can have a custom class. <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#</span><span class="string quote">"</span> <span class="support attribute">uib-tooltip</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">I can have a custom class applied to me!</span><span class="string quote">"</span> <span class="support attribute">tooltip-class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">customClass</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Check me out!<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">p</span></span><span class="support tag cclose">&gt;</span>


    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-group</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>Or use custom triggers, like focus: <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">input</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">text</span><span class="string quote">"</span> <span class="support attribute">value</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">Click me!</span><span class="string quote">"</span> <span class="support attribute">uib-tooltip</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">See? Now click away...</span><span class="string quote">"</span> <span class="support attribute">tooltip-trigger</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">focus</span><span class="string quote">"</span> <span class="support attribute">tooltip-placement</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">right</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-control</span><span class="string quote">"</span> <span class="support tag cclose">/&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>

    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-group</span><span class="string quote">"</span> <span class="support attribute">ng-class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">{'has-error' : !inputModel}</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>Disable tooltips conditionally:<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">input</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">text</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">inputModel</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-control</span><span class="string quote">"</span>
             <span class="support attribute">placeholder</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">Hover over this for a tooltip until this is filled</span><span class="string quote">"</span>
             <span class="support attribute">uib-tooltip</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">Enter something in this input field to disable this tooltip</span><span class="string quote">"</span>
             <span class="support attribute">tooltip-placement</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">top</span><span class="string quote">"</span>
             <span class="support attribute">tooltip-trigger</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">mouseenter</span><span class="string quote">"</span>
             <span class="support attribute">tooltip-enable</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">!inputModel</span><span class="string quote">"</span> <span class="support tag cclose">/&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-group</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>
        Open tooltips <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">span</span></span> <span class="support attribute">uib-tooltip</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">Hello!</span><span class="string quote">"</span> <span class="support attribute">tooltip-is-open</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">tooltipIsOpen</span><span class="string quote">"</span> <span class="support attribute">tooltip-placement</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">bottom</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>conditionally.<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">span</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">label</span></span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">button</span></span> <span class="support attribute">ng-click</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">tooltipIsOpen = !tooltipIsOpen</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>Toggle tooltip<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">button</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
    <span class="source js embedded"><span class="support tag script">&lt;</span><span class="entity tag script">script</span> <span class="entity tag script">type</span>=<span class="string">"text/ng-template"</span> <span class="entity tag script">id</span>=<span class="string">"myTooltipTemplate.html"</span><span class="support tag script">&gt;</span>
      <span class="keyword operator">&lt;</span>span<span class="keyword operator">&gt;</span>Special Tooltip with <span class="keyword operator">&lt;</span>strong<span class="keyword operator">&gt;</span>markup<span class="keyword operator">&lt;</span><span class="string regexp"><span class="string regexp open">/</span>strong&gt; and {{ dynamicTooltipText }}&lt;<span class="string regexp cclose">/</span></span>span<span class="keyword operator">&gt;</span>
    <span class="support tag script">&lt;/</span><span class="entity tag script">script</span><span class="support tag script">&gt;</span></span>
<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
</code></pre>
                                        </div>
                                    </uib-tab>
                                    <uib-tab index="1" heading="JavaScript">
                                        <div plunker-content="javascript">
                                            <pre ng-non-bindable=""><code data-language="javascript" class="rainbow">angular.<span class="function call">module</span>(<span class="string">'ui.bootstrap.demo'</span>).<span class="function call">controller</span>(<span class="string">'TooltipDemoCtrl'</span>, <span class="storage function">function</span> ($scope, $sce) {
  $scope.dynamicTooltip <span class="keyword operator">=</span> <span class="string">'Hello, World!'</span>;
  $scope.dynamicTooltipText <span class="keyword operator">=</span> <span class="string">'dynamic'</span>;
  $scope.htmlTooltip <span class="keyword operator">=</span> $sce.<span class="function call">trustAsHtml</span>(<span class="string">'I<span class="constant character escape">\'</span>ve been made &lt;b&gt;bold&lt;/b&gt;!'</span>);
  $scope.placement <span class="keyword operator">=</span> {
    options: [
      <span class="string">'top'</span>,
      <span class="string">'top-left'</span>,
      <span class="string">'top-right'</span>,
      <span class="string">'bottom'</span>,
      <span class="string">'bottom-left'</span>,
      <span class="string">'bottom-right'</span>,
      <span class="string">'left'</span>,
      <span class="string">'left-top'</span>,
      <span class="string">'left-bottom'</span>,
      <span class="string">'right'</span>,
      <span class="string">'right-top'</span>,
      <span class="string">'right-bottom'</span>
    ],
    selected: <span class="string">'top'</span>
  };
});
</code></pre>
                                        </div>
                                    </uib-tab>
                                </uib-tabset>
                            </div>
                        </div>
                    </section>
                    <script>angular.module('ui.bootstrap.demo').controller('TooltipDemoCtrl', function ($scope, $sce) {
  $scope.dynamicTooltip = 'Hello, World!';
  $scope.dynamicTooltipText = 'dynamic';
  $scope.htmlTooltip = $sce.trustAsHtml('I\'ve been made <b>bold</b>!');
  $scope.placement = {
    options: [
      'top',
      'top-left',
      'top-right',
      'bottom',
      'bottom-left',
      'bottom-right',
      'left',
      'left-top',
      'left-bottom',
      'right',
      'right-top',
      'right-bottom'
    ],
    selected: 'top'
  };
});
</script>
                
                    <section id="typeahead">
                        <div class="page-header">
                          <h1>Typeahead<small>
                              (<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/typeahead">ui.bootstrap.typeahead</a>)
                          </small></h1>
                          </div>
                          <div class="row">
                            <div class="col-md-6 show-grid">
                                <style>
  .typeahead-demo .custom-popup-wrapper {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    background-color: #f9f9f9;
  }

  .typeahead-demo .custom-popup-wrapper > .message {
    padding: 10px 20px;
    border-bottom: 1px solid #ddd;
    color: #868686;
  }

  .typeahead-demo .custom-popup-wrapper > .dropdown-menu {
    position: static;
    float: none;
    display: block;
    min-width: 160px;
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
</style>

<script type="text/ng-template" id="customTemplate.html">
  <a>
      <img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
      <span ng-bind-html="match.label | uibTypeaheadHighlight:query"></span>
  </a>
</script>

<script type="text/ng-template" id="customPopupTemplate.html">
  <div class="custom-popup-wrapper"
     ng-style="{top: position().top+'px', left: position().left+'px'}"
     style="display: block;"
     ng-show="isOpen() && !moveInProgress"
     aria-hidden="{{!isOpen()}}">
    <p class="message">select location from drop down.</p>

    <ul class="dropdown-menu" role="listbox">
        <li ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }"
            ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{::match.id}}">
            <div uib-typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
        </li>
    </ul>
  </div>
</script>

<div class="container-fluid typeahead-demo" ng-controller="TypeaheadCtrl">

    <h4>Static arrays</h4>
    <pre>Model: {{selected | json}}</pre>
    <input type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">

    <h4>Asynchronous results</h4>
    <pre>Model: {{asyncSelected | json}}</pre>
    <input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" uib-typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" typeahead-no-results="noResults" class="form-control">
    <i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
    <div ng-show="noResults">
      <i class="glyphicon glyphicon-remove"></i> No Results Found
    </div>

    <h4>ngModelOptions support</h4>
    <pre>Model: {{ngModelOptionsSelected | json}}</pre>
    <input type="text" ng-model="ngModelOptionsSelected" ng-model-options="modelOptions" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">

    <h4>Custom templates for results</h4>
    <pre>Model: {{customSelected | json}}</pre>
    <input type="text" ng-model="customSelected" placeholder="Custom template" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html" class="form-control" typeahead-show-hint="true" typeahead-min-length="0">

    <h4>Custom popup templates for typeahead's dropdown</h4>
    <pre>Model: {{customPopupSelected | json}}</pre>
    <input type="text" ng-model="customPopupSelected" placeholder="Custom popup template" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-popup-template-url="customPopupTemplate.html" class="form-control">
</div>

                            </div>
                            <div class="col-md-6">
                                <p>Typeahead is a AngularJS version of <a href="http://getbootstrap.com/2.3.2/javascript.html#typeahead">Bootstrap v2's typeahead plugin</a>.
This directive can be used to quickly create elegant typeaheads with any form text input.</p>
<p>It is very well integrated into AngularJS as it uses a subset of the
<a href="http://docs.angularjs.org/api/ng.directive:select">select directive</a> syntax, which is very flexible. Supported expressions are:</p>
<ul>
<li><em>label</em> for <em>value</em> in <em>sourceArray</em></li>
<li><em>select</em> as <em>label</em> for <em>value</em> in <em>sourceArray</em></li>
</ul>
<p>The <code>sourceArray</code> expression can use a special <code>$viewValue</code> variable that corresponds to the value entered inside the input.</p>
<p>This directive works with promises, meaning you can retrieve matches using the <code>$http</code> service with minimal effort.</p>
<h3 id="uib-typeahead-settings">uib-typeahead settings</h3>
<ul>
<li><p><code>ng-model</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i> -
Assignable angular expression to data-bind to.</p>
</li>
<li><p><code>ng-model-options</code>
<small class="badge">$</small> -
Options for ng-model (see <a href="https://docs.angularjs.org/api/ng/directive/ngModelOptions">ng-model-options directive</a>). Currently supports the <code>debounce</code> and <code>getterSetter</code> options.</p>
</li>
<li><p><code>typeahead-append-to</code>
<small class="badge">$</small>
<em>(Default: <code>null</code>)</em> -
Should the typeahead popup be appended to an element instead of the parent element?</p>
</li>
<li><p><code>typeahead-append-to-body</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>false</code>)</em> -
Should the typeahead popup be appended to $body instead of the parent element?</p>
</li>
<li><p><code>typeahead-editable</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>true</code>)</em> -
Should it restrict model values to the ones selected from the popup only?</p>
</li>
<li><p><code>typeahead-focus-first</code>
<small class="badge">$</small>
<em>(Default: <code>true</code>)</em> -
Should the first match automatically be focused as you type?</p>
</li>
<li><p><code>typeahead-focus-on-select</code>
<em>(Default: <code>true</code>)</em> -
On selection, focus the input element the typeahead directive is associated with.</p>
</li>
<li><p><code>typeahead-input-formatter</code>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>undefined</code>)</em> -
Format the ng-model result after selection.</p>
</li>
<li><p><code>typeahead-is-open</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>angular.noop</code>)</em> -
Binding to a variable that indicates if the dropdown is open.</p>
</li>
<li><p><code>typeahead-loading</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>angular.noop</code>)</em> -
Binding to a variable that indicates if matches are being retrieved asynchronously.</p>
</li>
<li><p><code>typeahead-min-length</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>1</code>)</em> -
Minimal no of characters that needs to be entered before typeahead kicks-in. Must be greater than or equal to 0.</p>
</li>
<li><p><code>typeahead-no-results</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>angular.noop</code>)</em> -
Binding to a variable that indicates if no matching results were found.</p>
</li>
<li><p><code>typeahead-on-select($item, $model, $label, $event)</code>
<small class="badge">$</small>
<em>(Default: <code>null</code>)</em> -
A callback executed when a match is selected. $event can be undefined if selection not triggered from a user event.</p>
</li>
<li><p><code>typeahead-popup-template-url</code>
<em>(Default: <code>uib/template/typeahead/typeahead-popup.html</code>)</em> -
Set custom popup template.</p>
</li>
<li><p><code>typeahead-select-on-blur</code>
<small class="badge">$</small>
<em>(Default: <code>false</code>)</em> -
On blur, select the currently highlighted match.</p>
</li>
<li><p><code>typeahead-select-on-exact</code>
<small class="badge">$</small>
<em>(Default: <code>false</code>)</em> -
Automatically select the item when it is the only one that exactly matches the user input.</p>
</li>
<li><p><code>typeahead-show-hint</code>
<small class="badge">$</small>
<em>(Default: <code>false</code>)</em> -
Show hint when the first option matches.</p>
</li>
<li><p><code>typeahead-template-url</code>
<em>(Default: <code>uib/template/typeahead/typeahead-match.html</code>)</em> -
Set custom item template.</p>
</li>
<li><p><code>typeahead-wait-ms</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
<em>(Default: <code>0</code>)</em> -
Minimal wait time after last character typed before typeahead kicks-in.</p>
</li>
<li><p><code>uib-typeahead</code>
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i> -
Comprehension Angular expression (see <a href="http://docs.angularjs.org/api/ng.directive:select">select directive</a>).</p>
</li>
</ul>

                            </div>
                        </div>
                        <hr>
                        <div class="row code">
                            <div class="col-md-12" ng-controller="PlunkerCtrl">
                                <div class="pull-right">
                                    <button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.5.0', '3.3.6', '1.2.5', 'typeahead')"><i class="glyphicon glyphicon-edit"></i> Edit in plunker</button>
                                </div>
                                <uib-tabset active="activeTab">
                                    <uib-tab index="0" heading="Markup">
                                        <div plunker-content="markup">
                                            <pre ng-non-bindable=""><code data-language="html" class="rainbow"><span class="source css embedded"><span class="keyword operator">&lt;</span>style<span class="keyword operator">&gt;</span>
  .typeahead<span class="keyword operator">-</span>demo .custom<span class="keyword operator">-</span>popup<span class="keyword operator">-</span>wrapper {
    position: absolute;
    top: <span class="constant numeric">100</span>%;
    left: <span class="constant numeric">0</span>;
    z<span class="keyword operator">-</span>index: <span class="constant numeric">1000</span>;
    display: none;
    background<span class="keyword operator">-</span>color: <span class="comment">#f9f9f9;</span>
  }

  .typeahead<span class="keyword operator">-</span>demo .custom<span class="keyword operator">-</span>popup<span class="keyword operator">-</span>wrapper <span class="keyword operator">&gt;</span> .message {
    padding: 10px 20px;
    border<span class="keyword operator">-</span>bottom: 1px solid <span class="comment">#ddd;</span>
    color: <span class="comment">#868686;</span>
  }

  .typeahead<span class="keyword operator">-</span>demo .custom<span class="keyword operator">-</span>popup<span class="keyword operator">-</span>wrapper <span class="keyword operator">&gt;</span> .dropdown<span class="keyword operator">-</span>menu {
    position: <span class="keyword">static</span>;
    <span class="keyword">float</span>: none;
    display: block;
    min<span class="keyword operator">-</span>width: 160px;
    background<span class="keyword operator">-</span>color: transparent;
    border: none;
    border<span class="keyword operator">-</span>radius: <span class="constant numeric">0</span>;
    box<span class="keyword operator">-</span>shadow: none;
  }
<span class="keyword operator">&lt;</span>/style<span class="keyword operator">&gt;</span></span>

<span class="source js embedded"><span class="support tag script">&lt;</span><span class="entity tag script">script</span> <span class="entity tag script">type</span>=<span class="string">"text/ng-template"</span> <span class="entity tag script">id</span>=<span class="string">"customTemplate.html"</span><span class="support tag script">&gt;</span>
  <span class="keyword operator">&lt;</span>a<span class="keyword operator">&gt;</span>
      <span class="keyword operator">&lt;</span>img ng<span class="keyword operator">-</span>src<span class="keyword operator">=</span><span class="string">"http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}"</span> width<span class="keyword operator">=</span><span class="string">"16"</span><span class="keyword operator">&gt;</span>
      <span class="keyword operator">&lt;</span>span ng<span class="keyword operator">-</span>bind<span class="keyword operator">-</span>html<span class="keyword operator">=</span><span class="string">"match.label | uibTypeaheadHighlight:query"</span><span class="keyword operator">&gt;</span><span class="keyword operator">&lt;</span>/span<span class="keyword operator">&gt;</span>
  <span class="keyword operator">&lt;</span>/a<span class="keyword operator">&gt;</span>
<span class="support tag script">&lt;/</span><span class="entity tag script">script</span><span class="support tag script">&gt;</span></span>

<span class="source js embedded"><span class="support tag script">&lt;</span><span class="entity tag script">script</span> <span class="entity tag script">type</span>=<span class="string">"text/ng-template"</span> <span class="entity tag script">id</span>=<span class="string">"customPopupTemplate.html"</span><span class="support tag script">&gt;</span>
  <span class="keyword operator">&lt;</span>div <span class="keyword">class</span><span class="keyword operator">=</span><span class="string">"custom-popup-wrapper"</span>
     ng<span class="keyword operator">-</span>style<span class="keyword operator">=</span><span class="string">"{top: position().top+'px', left: position().left+'px'}"</span>
     style<span class="keyword operator">=</span><span class="string">"display: block;"</span>
     ng<span class="keyword operator">-</span>show<span class="keyword operator">=</span><span class="string">"isOpen() &amp;&amp; !moveInProgress"</span>
     aria<span class="keyword operator">-</span>hidden<span class="keyword operator">=</span><span class="string">"{{!isOpen()}}"</span><span class="keyword operator">&gt;</span>
    <span class="keyword operator">&lt;</span>p <span class="keyword">class</span><span class="keyword operator">=</span><span class="string">"message"</span><span class="keyword operator">&gt;</span>select location from drop down.<span class="keyword operator">&lt;</span>/p<span class="keyword operator">&gt;</span>

    <span class="keyword operator">&lt;</span>ul <span class="keyword">class</span><span class="keyword operator">=</span><span class="string">"dropdown-menu"</span> role<span class="keyword operator">=</span><span class="string">"listbox"</span><span class="keyword operator">&gt;</span>
        <span class="keyword operator">&lt;</span>li ng<span class="keyword operator">-</span>repeat<span class="keyword operator">=</span><span class="string">"match in matches track by $index"</span> ng<span class="keyword operator">-</span><span class="keyword">class</span><span class="keyword operator">=</span><span class="string">"{active: isActive($index) }"</span>
            ng<span class="keyword operator">-</span>mouseenter<span class="keyword operator">=</span><span class="string">"selectActive($index)"</span> ng<span class="keyword operator">-</span>click<span class="keyword operator">=</span><span class="string">"selectMatch($index)"</span> role<span class="keyword operator">=</span><span class="string">"option"</span> id<span class="keyword operator">=</span><span class="string">"{{::match.id}}"</span><span class="keyword operator">&gt;</span>
            <span class="keyword operator">&lt;</span>div uib<span class="keyword operator">-</span>typeahead<span class="keyword operator">-</span>match index<span class="keyword operator">=</span><span class="string">"$index"</span> match<span class="keyword operator">=</span><span class="string">"match"</span> query<span class="keyword operator">=</span><span class="string">"query"</span> template<span class="keyword operator">-</span>url<span class="keyword operator">=</span><span class="string">"templateUrl"</span><span class="keyword operator">&gt;</span><span class="keyword operator">&lt;</span>/div<span class="keyword operator">&gt;</span>
        <span class="keyword operator">&lt;</span>/li<span class="keyword operator">&gt;</span>
    <span class="keyword operator">&lt;</span>/ul<span class="keyword operator">&gt;</span>
  <span class="keyword operator">&lt;</span>/div<span class="keyword operator">&gt;</span>
<span class="support tag script">&lt;/</span><span class="entity tag script">script</span><span class="support tag script">&gt;</span></span>

<span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">'</span><span class="string value">container-fluid typeahead-demo</span><span class="string quote">'</span> <span class="support attribute">ng-controller</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">TypeaheadCtrl</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>

    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>Static arrays<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">pre</span></span><span class="support tag cclose">&gt;</span>Model: {{selected | json}}<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">pre</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">input</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">text</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">selected</span><span class="string quote">"</span> <span class="support attribute">uib-typeahead</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">state for state in states | filter:$viewValue | limitTo:8</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-control</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>

    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>Asynchronous results<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">pre</span></span><span class="support tag cclose">&gt;</span>Model: {{asyncSelected | json}}<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">pre</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">input</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">text</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">asyncSelected</span><span class="string quote">"</span> <span class="support attribute">placeholder</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">Locations loaded via $http</span><span class="string quote">"</span> <span class="support attribute">uib-typeahead</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">address for address in getLocation($viewValue)</span><span class="string quote">"</span> <span class="support attribute">typeahead-loading</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">loadingLocations</span><span class="string quote">"</span> <span class="support attribute">typeahead-no-results</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">noResults</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-control</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">i</span></span> <span class="support attribute">ng-show</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">loadingLocations</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">glyphicon glyphicon-refresh</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">i</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">ng-show</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">noResults</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">i</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">glyphicon glyphicon-remove</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">i</span></span><span class="support tag cclose">&gt;</span> No Results Found
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>

    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>ngModelOptions support<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">pre</span></span><span class="support tag cclose">&gt;</span>Model: {{ngModelOptionsSelected | json}}<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">pre</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">input</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">text</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">ngModelOptionsSelected</span><span class="string quote">"</span> <span class="support attribute">ng-model-options</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">modelOptions</span><span class="string quote">"</span> <span class="support attribute">uib-typeahead</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">state for state in states | filter:$viewValue | limitTo:8</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-control</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>

    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>Custom templates for results<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">pre</span></span><span class="support tag cclose">&gt;</span>Model: {{customSelected | json}}<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">pre</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">input</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">text</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">customSelected</span><span class="string quote">"</span> <span class="support attribute">placeholder</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">Custom template</span><span class="string quote">"</span> <span class="support attribute">uib-typeahead</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">state as state.name for state in statesWithFlags | filter:{name:$viewValue}</span><span class="string quote">"</span> <span class="support attribute">typeahead-template-url</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">customTemplate.html</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-control</span><span class="string quote">"</span> <span class="support attribute">typeahead-show-hint</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">true</span><span class="string quote">"</span> <span class="support attribute">typeahead-min-length</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">0</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>

    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>Custom popup templates for typeahead's dropdown<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h4</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">pre</span></span><span class="support tag cclose">&gt;</span>Model: {{customPopupSelected | json}}<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">pre</span></span><span class="support tag cclose">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">input</span></span> <span class="support attribute">type</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">text</span><span class="string quote">"</span> <span class="support attribute">ng-model</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">customPopupSelected</span><span class="string quote">"</span> <span class="support attribute">placeholder</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">Custom popup template</span><span class="string quote">"</span> <span class="support attribute">uib-typeahead</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">state as state.name for state in statesWithFlags | filter:{name:$viewValue}</span><span class="string quote">"</span> <span class="support attribute">typeahead-popup-template-url</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">customPopupTemplate.html</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">form-control</span><span class="string quote">"</span><span class="support tag cclose">&gt;</span>
<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag cclose">&gt;</span>
</code></pre>
                                        </div>
                                    </uib-tab>
                                    <uib-tab index="1" heading="JavaScript">
                                        <div plunker-content="javascript">
                                            <pre ng-non-bindable=""><code data-language="javascript" class="rainbow">angular.<span class="function call">module</span>(<span class="string">'ui.bootstrap.demo'</span>).<span class="function call">controller</span>(<span class="string">'TypeaheadCtrl'</span>, <span class="keyword">function</span>($scope, $http) {

  <span class="keyword">var</span> _selected;

  $scope.selected <span class="keyword operator">=</span> undefined;
  $scope.states <span class="keyword operator">=</span> [<span class="string">'Alabama'</span>, <span class="string">'Alaska'</span>, <span class="string">'Arizona'</span>, <span class="string">'Arkansas'</span>, <span class="string">'California'</span>, <span class="string">'Colorado'</span>, <span class="string">'Connecticut'</span>, <span class="string">'Delaware'</span>, <span class="string">'Florida'</span>, <span class="string">'Georgia'</span>, <span class="string">'Hawaii'</span>, <span class="string">'Idaho'</span>, <span class="string">'Illinois'</span>, <span class="string">'Indiana'</span>, <span class="string">'Iowa'</span>, <span class="string">'Kansas'</span>, <span class="string">'Kentucky'</span>, <span class="string">'Louisiana'</span>, <span class="string">'Maine'</span>, <span class="string">'Maryland'</span>, <span class="string">'Massachusetts'</span>, <span class="string">'Michigan'</span>, <span class="string">'Minnesota'</span>, <span class="string">'Mississippi'</span>, <span class="string">'Missouri'</span>, <span class="string">'Montana'</span>, <span class="string">'Nebraska'</span>, <span class="string">'Nevada'</span>, <span class="string">'New Hampshire'</span>, <span class="string">'New Jersey'</span>, <span class="string">'New Mexico'</span>, <span class="string">'New York'</span>, <span class="string">'North Dakota'</span>, <span class="string">'North Carolina'</span>, <span class="string">'Ohio'</span>, <span class="string">'Oklahoma'</span>, <span class="string">'Oregon'</span>, <span class="string">'Pennsylvania'</span>, <span class="string">'Rhode Island'</span>, <span class="string">'South Carolina'</span>, <span class="string">'South Dakota'</span>, <span class="string">'Tennessee'</span>, <span class="string">'Texas'</span>, <span class="string">'Utah'</span>, <span class="string">'Vermont'</span>, <span class="string">'Virginia'</span>, <span class="string">'Washington'</span>, <span class="string">'West Virginia'</span>, <span class="string">'Wisconsin'</span>, <span class="string">'Wyoming'</span>];
  <span class="comment">// Any function returning a promise object can be used to load values asynchronously</span>
<span class="entity function">  $scope.getLocation </span><span class="keyword operator">=</span> <span class="keyword">function</span>(val) {
    <span class="keyword">return</span> $http.<span class="function call">get</span>(<span class="string">'//maps.googleapis.com/maps/api/geocode/json'</span>, {
      params: {
        address: val,
        sensor: <span class="constant language">false</span>
      }
    }).<span class="keyword">then</span>(<span class="keyword">function</span>(response){
      <span class="keyword">return</span> response.data.results.<span class="function call">map</span>(<span class="keyword">function</span>(item){
        <span class="keyword">return</span> item.formatted_address;
      });
    });
  };

<span class="entity function">  $scope.ngModelOptionsSelected </span><span class="keyword operator">=</span> <span class="keyword">function</span>(value) {
    <span class="keyword">if</span> (arguments.<span class="support property">length</span>) {
      _selected <span class="keyword operator">=</span> value;
    } <span class="keyword">else</span> {
      <span class="keyword">return</span> _selected;
    }
  };

  $scope.modelOptions <span class="keyword operator">=</span> {
    debounce: {
      default: <span class="constant numeric">500</span>,
      blur: <span class="constant numeric">250</span>
    },
    getterSetter: <span class="constant language">true</span>
  };

  $scope.statesWithFlags <span class="keyword operator">=</span> [{'name':<span class="string">'Alabama'</span>,'flag':'<span class="constant numeric">5</span><span class="string regexp"><span class="string regexp open">/</span>5c/Flag_of_Alabama.svg/45px-Flag_of_Alabama.svg.png'},{'name':'Alaska','flag':'e/e6/Flag_of_Alaska.svg/43px-Flag_of_Alaska.svg.png'},{'name':'Arizona','flag':'9/9d/Flag_of_Arizona.svg/45px-Flag_of_Arizona.svg.png'},{'name':'Arkansas','flag':'9/9d/Flag_of_Arkansas.svg/45px-Flag_of_Arkansas.svg.png'},{'name':'California','flag':'0/01/Flag_of_California.svg/45px-Flag_of_California.svg.png'},{'name':'Colorado','flag':'4/46/Flag_of_Colorado.svg/45px-Flag_of_Colorado.svg.png'},{'name':'Connecticut','flag':'9/96/Flag_of_Connecticut.svg/39px-Flag_of_Connecticut.svg.png'},{'name':'Delaware','flag':'c/c6/Flag_of_Delaware.svg/45px-Flag_of_Delaware.svg.png'},{'name':'Florida','flag':'f/f7/Flag_of_Florida.svg/45px-Flag_of_Florida.svg.png'},{'name':'Georgia','flag':'5/54/Flag_of_Georgia_%28U.S._state%29.svg/46px-Flag_of_Georgia_%28U.S._state%29.svg.png'},{'name':'Hawaii','flag':'e/ef/Flag_of_Hawaii.svg/46px-Flag_of_Hawaii.svg.png'},{'name':'Idaho','flag':'a/a4/Flag_of_Idaho.svg/38px-Flag_of_Idaho.svg.png'},{'name':'Illinois','flag':'0/01/Flag_of_Illinois.svg/46px-Flag_of_Illinois.svg.png'},{'name':'Indiana','flag':'a/ac/Flag_of_Indiana.svg/45px-Flag_of_Indiana.svg.png'},{'name':'Iowa','flag':'a/aa/Flag_of_Iowa.svg/44px-Flag_of_Iowa.svg.png'},{'name':'Kansas','flag':'d/da/Flag_of_Kansas.svg/46px-Flag_of_Kansas.svg.png'},{'name':'Kentucky','flag':'8/8d/Flag_of_Kentucky.svg/46px-Flag_of_Kentucky.svg.png'},{'name':'Louisiana','flag':'e/e0/Flag_of_Louisiana.svg/46px-Flag_of_Louisiana.svg.png'},{'name':'Maine','flag':'3/35/Flag_of_Maine.svg/45px-Flag_of_Maine.svg.png'},{'name':'Maryland','flag':'a/a0/Flag_of_Maryland.svg/45px-Flag_of_Maryland.svg.png'},{'name':'Massachusetts','flag':'f/f2/Flag_of_Massachusetts.svg/46px-Flag_of_Massachusetts.svg.png'},{'name':'Michigan','flag':'b/b5/Flag_of_Michigan.svg/45px-Flag_of_Michigan.svg.png'},{'name':'Minnesota','flag':'b/b9/Flag_of_Minnesota.svg/46px-Flag_of_Minnesota.svg.png'},{'name':'Mississippi','flag':'4/42/Flag_of_Mississippi.svg/45px-Flag_of_Mississippi.svg.png'},{'name':'Missouri','flag':'5/5a/Flag_of_Missouri.svg/46px-Flag_of_Missouri.svg.png'},{'name':'Montana','flag':'c/cb/Flag_of_Montana.svg/45px-Flag_of_Montana.svg.png'},{'name':'Nebraska','flag':'4/4d/Flag_of_Nebraska.svg/46px-Flag_of_Nebraska.svg.png'},{'name':'Nevada','flag':'f/f1/Flag_of_Nevada.svg/45px-Flag_of_Nevada.svg.png'},{'name':'New Hampshire','flag':'2/28/Flag_of_New_Hampshire.svg/45px-Flag_of_New_Hampshire.svg.png'},{'name':'New Jersey','flag':'9/92/Flag_of_New_Jersey.svg/45px-Flag_of_New_Jersey.svg.png'},{'name':'New Mexico','flag':'c/c3/Flag_of_New_Mexico.svg/45px-Flag_of_New_Mexico.svg.png'},{'name':'New York','flag':'1/1a/Flag_of_New_York.svg/46px-Flag_of_New_York.svg.png'},{'name':'North Carolina','flag':'b/bb/Flag_of_North_Carolina.svg/45px-Flag_of_North_Carolina.svg.png'},{'name':'North Dakota','flag':'e/ee/Flag_of_North_Dakota.svg/38px-Flag_of_North_Dakota.svg.png'},{'name':'Ohio','flag':'4/4c/Flag_of_Ohio.svg/46px-Flag_of_Ohio.svg.png'},{'name':'Oklahoma','flag':'6/6e/Flag_of_Oklahoma.svg/45px-Flag_of_Oklahoma.svg.png'},{'name':'Oregon','flag':'b/b9/Flag_of_Oregon.svg/46px-Flag_of_Oregon.svg.png'},{'name':'Pennsylvania','flag':'f/f7/Flag_of_Pennsylvania.svg/45px-Flag_of_Pennsylvania.svg.png'},{'name':'Rhode Island','flag':'f/f3/Flag_of_Rhode_Island.svg/32px-Flag_of_Rhode_Island.svg.png'},{'name':'South Carolina','flag':'6/69/Flag_of_South_Carolina.svg/45px-Flag_of_South_Carolina.svg.png'},{'name':'South Dakota','flag':'1/1a/Flag_of_South_Dakota.svg/46px-Flag_of_South_Dakota.svg.png'},{'name':'Tennessee','flag':'9/9e/Flag_of_Tennessee.svg/46px-Flag_of_Tennessee.svg.png'},{'name':'Texas','flag':'f/f7/Flag_of_Texas.svg/45px-Flag_of_Texas.svg.png'},{'name':'Utah','flag':'f/f6/Flag_of_Utah.svg/45px-Flag_of_Utah.svg.png'},{'name':'Vermont','flag':'4/49/Flag_of_Vermont.svg/46px-Flag_of_Vermont.svg.png'},{'name':'Virginia','flag':'4/47/Flag_of_Virginia.svg/44px-Flag_of_Virginia.svg.png'},{'name':'Washington','flag':'5/54/Flag_of_Washington.svg/46px-Flag_of_Washington.svg.png'},{'name':'West Virginia','flag':'2/22/Flag_of_West_Virginia.svg/46px-Flag_of_West_Virginia.svg.png'},{'name':'Wisconsin','flag':'2/22/Flag_of_Wisconsin.svg/45px-Flag_of_Wisconsin.svg.png'},{'name':'Wyoming','flag':'b/bc/Flag_of_Wyoming.svg<span class="string regexp cclose">/</span></span>43px<span class="keyword operator">-</span>Flag_of_Wyoming.svg.png'}];
});
</code></pre>
                                        </div>
                                    </uib-tab>
                                </uib-tabset>
                            </div>
                        </div>
                    </section>
                    <script>angular.module('ui.bootstrap.demo').controller('TypeaheadCtrl', function($scope, $http) {

  var _selected;

  $scope.selected = undefined;
  $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
  // Any function returning a promise object can be used to load values asynchronously
  $scope.getLocation = function(val) {
    return $http.get('//maps.googleapis.com/maps/api/geocode/json', {
      params: {
        address: val,
        sensor: false
      }
    }).then(function(response){
      return response.data.results.map(function(item){
        return item.formatted_address;
      });
    });
  };

  $scope.ngModelOptionsSelected = function(value) {
    if (arguments.length) {
      _selected = value;
    } else {
      return _selected;
    }
  };

  $scope.modelOptions = {
    debounce: {
      default: 500,
      blur: 250
    },
    getterSetter: true
  };

  $scope.statesWithFlags = [{'name':'Alabama','flag':'5/5c/Flag_of_Alabama.svg/45px-Flag_of_Alabama.svg.png'},{'name':'Alaska','flag':'e/e6/Flag_of_Alaska.svg/43px-Flag_of_Alaska.svg.png'},{'name':'Arizona','flag':'9/9d/Flag_of_Arizona.svg/45px-Flag_of_Arizona.svg.png'},{'name':'Arkansas','flag':'9/9d/Flag_of_Arkansas.svg/45px-Flag_of_Arkansas.svg.png'},{'name':'California','flag':'0/01/Flag_of_California.svg/45px-Flag_of_California.svg.png'},{'name':'Colorado','flag':'4/46/Flag_of_Colorado.svg/45px-Flag_of_Colorado.svg.png'},{'name':'Connecticut','flag':'9/96/Flag_of_Connecticut.svg/39px-Flag_of_Connecticut.svg.png'},{'name':'Delaware','flag':'c/c6/Flag_of_Delaware.svg/45px-Flag_of_Delaware.svg.png'},{'name':'Florida','flag':'f/f7/Flag_of_Florida.svg/45px-Flag_of_Florida.svg.png'},{'name':'Georgia','flag':'5/54/Flag_of_Georgia_%28U.S._state%29.svg/46px-Flag_of_Georgia_%28U.S._state%29.svg.png'},{'name':'Hawaii','flag':'e/ef/Flag_of_Hawaii.svg/46px-Flag_of_Hawaii.svg.png'},{'name':'Idaho','flag':'a/a4/Flag_of_Idaho.svg/38px-Flag_of_Idaho.svg.png'},{'name':'Illinois','flag':'0/01/Flag_of_Illinois.svg/46px-Flag_of_Illinois.svg.png'},{'name':'Indiana','flag':'a/ac/Flag_of_Indiana.svg/45px-Flag_of_Indiana.svg.png'},{'name':'Iowa','flag':'a/aa/Flag_of_Iowa.svg/44px-Flag_of_Iowa.svg.png'},{'name':'Kansas','flag':'d/da/Flag_of_Kansas.svg/46px-Flag_of_Kansas.svg.png'},{'name':'Kentucky','flag':'8/8d/Flag_of_Kentucky.svg/46px-Flag_of_Kentucky.svg.png'},{'name':'Louisiana','flag':'e/e0/Flag_of_Louisiana.svg/46px-Flag_of_Louisiana.svg.png'},{'name':'Maine','flag':'3/35/Flag_of_Maine.svg/45px-Flag_of_Maine.svg.png'},{'name':'Maryland','flag':'a/a0/Flag_of_Maryland.svg/45px-Flag_of_Maryland.svg.png'},{'name':'Massachusetts','flag':'f/f2/Flag_of_Massachusetts.svg/46px-Flag_of_Massachusetts.svg.png'},{'name':'Michigan','flag':'b/b5/Flag_of_Michigan.svg/45px-Flag_of_Michigan.svg.png'},{'name':'Minnesota','flag':'b/b9/Flag_of_Minnesota.svg/46px-Flag_of_Minnesota.svg.png'},{'name':'Mississippi','flag':'4/42/Flag_of_Mississippi.svg/45px-Flag_of_Mississippi.svg.png'},{'name':'Missouri','flag':'5/5a/Flag_of_Missouri.svg/46px-Flag_of_Missouri.svg.png'},{'name':'Montana','flag':'c/cb/Flag_of_Montana.svg/45px-Flag_of_Montana.svg.png'},{'name':'Nebraska','flag':'4/4d/Flag_of_Nebraska.svg/46px-Flag_of_Nebraska.svg.png'},{'name':'Nevada','flag':'f/f1/Flag_of_Nevada.svg/45px-Flag_of_Nevada.svg.png'},{'name':'New Hampshire','flag':'2/28/Flag_of_New_Hampshire.svg/45px-Flag_of_New_Hampshire.svg.png'},{'name':'New Jersey','flag':'9/92/Flag_of_New_Jersey.svg/45px-Flag_of_New_Jersey.svg.png'},{'name':'New Mexico','flag':'c/c3/Flag_of_New_Mexico.svg/45px-Flag_of_New_Mexico.svg.png'},{'name':'New York','flag':'1/1a/Flag_of_New_York.svg/46px-Flag_of_New_York.svg.png'},{'name':'North Carolina','flag':'b/bb/Flag_of_North_Carolina.svg/45px-Flag_of_North_Carolina.svg.png'},{'name':'North Dakota','flag':'e/ee/Flag_of_North_Dakota.svg/38px-Flag_of_North_Dakota.svg.png'},{'name':'Ohio','flag':'4/4c/Flag_of_Ohio.svg/46px-Flag_of_Ohio.svg.png'},{'name':'Oklahoma','flag':'6/6e/Flag_of_Oklahoma.svg/45px-Flag_of_Oklahoma.svg.png'},{'name':'Oregon','flag':'b/b9/Flag_of_Oregon.svg/46px-Flag_of_Oregon.svg.png'},{'name':'Pennsylvania','flag':'f/f7/Flag_of_Pennsylvania.svg/45px-Flag_of_Pennsylvania.svg.png'},{'name':'Rhode Island','flag':'f/f3/Flag_of_Rhode_Island.svg/32px-Flag_of_Rhode_Island.svg.png'},{'name':'South Carolina','flag':'6/69/Flag_of_South_Carolina.svg/45px-Flag_of_South_Carolina.svg.png'},{'name':'South Dakota','flag':'1/1a/Flag_of_South_Dakota.svg/46px-Flag_of_South_Dakota.svg.png'},{'name':'Tennessee','flag':'9/9e/Flag_of_Tennessee.svg/46px-Flag_of_Tennessee.svg.png'},{'name':'Texas','flag':'f/f7/Flag_of_Texas.svg/45px-Flag_of_Texas.svg.png'},{'name':'Utah','flag':'f/f6/Flag_of_Utah.svg/45px-Flag_of_Utah.svg.png'},{'name':'Vermont','flag':'4/49/Flag_of_Vermont.svg/46px-Flag_of_Vermont.svg.png'},{'name':'Virginia','flag':'4/47/Flag_of_Virginia.svg/44px-Flag_of_Virginia.svg.png'},{'name':'Washington','flag':'5/54/Flag_of_Washington.svg/46px-Flag_of_Washington.svg.png'},{'name':'West Virginia','flag':'2/22/Flag_of_West_Virginia.svg/46px-Flag_of_West_Virginia.svg.png'},{'name':'Wisconsin','flag':'2/22/Flag_of_Wisconsin.svg/45px-Flag_of_Wisconsin.svg.png'},{'name':'Wyoming','flag':'b/bc/Flag_of_Wyoming.svg/43px-Flag_of_Wyoming.svg.png'}];
});
</script>
                
            </div>
        </div>
    </div><!-- /.container -->
</div><!-- /.main -->
<footer class="footer">
    <div class="container">
        <p>Designed and built by all ui-bootstrap <a href="https://github.com/angular-ui/bootstrap/graphs/contributors" target="_blank">contributors</a>.</p>
        <p>Code licensed under <a href="https://github.com/angular-ui/bootstrap/blob/master/LICENSE">MIT License</a>.</p>
        <p><a href="https://github.com/angular-ui/bootstrap/issues?state=open">Issues</a></p>
    </div>
</footer>
<script src="assets/rainbow.js"></script>
<script src="assets/rainbow-generic.js"></script>
<script src="assets/rainbow-javascript.js"></script>
<script src="assets/rainbow-html.js"></script>
<script type="text/ng-template" id="downloadModal.html">
    <div class="modal-header"><h4 class="modal-title">Download Angular UI Bootstrap</h4></div>
    <div class="modal-body">
        <form class="form-horizontal">
          <div class="form-group">
            <label class="col-sm-3 control-label"><strong>Build</strong></label>
            <div class="col-sm-9">
              <span class="btn-group">
                <button type="button" class="btn btn-default" ng-model="options.minified" uib-btn-radio="true">Minified</button>
                <button type="button" class="btn btn-default" ng-model="options.minified" uib-btn-radio="false">Uncompressed</button>
              </span>
              <small class="help-block">Use <b>Minified</b> version in your deployed application. <b>Uncompressed</b> source code is useful only for debugging and development purpose.</small>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label"><strong>Include Templates</strong></label>
            <div class="col-sm-9">
              <span class="btn-group">
                <button type="button" class="btn btn-default" ng-model="options.tpls" uib-btn-radio="true">Yes</button>
                <button type="button" class="btn btn-default" ng-model="options.tpls" uib-btn-radio="false">No</button>
              </span>
              <small class="help-block">Whether you want to include the <i>default templates</i>, bundled with most of the directives. These templates are based on Bootstrap's markup and CSS.</small>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label"><strong>npm</strong></label>
            <div class="col-sm-9">
              <pre style="margin-bottom:0;">npm install angular-ui-bootstrap</pre>
              <small class="help-block"><a href="https://www.npmjs.com/" target="_blank">npm</a> is a package manager for the web.</small>
            </div>
          </div>
        </form>
    </div>
    <div class="modal-footer">
        <a class="btn btn-default" ng-click="cancel()">Close</a>
        <a class="btn btn-primary" ng-href="{{download('1.2.5')}}" download><i class="glyphicon glyphicon-download-alt"></i> Download 1.2.5</a>
    </div>
</script>
<script type="text/ng-template" id="buildModal.html">
    <div class="modal-header">
      <h4>
      Create a Custom Build
      <br>
      <small>Select the modules you wish to download</small>
      </h4>
    </div>
    <div class="modal-body">
        <div ng-show="isOldBrowser()">
            Your current browser doesn't support creating custom builds.
            Please take a second to <a href="http://browsehappy.com/">upgrade to a
            more modern browser</a> (other than Safari).
        </div>
        <div ng-show="buildErrorText">
            <h4 style="text-align: center;">{{buildErrorText}}</h4>
        </div>
        <div ng-hide="buildErrorText || isOldBrowser()">
            
              
                <div class="btn-group" style="width: 100%;">
              
              <button type="button" class="btn btn-default"
               style="width: 33%; border-radius: 0;"
               ng-class="{'btn-primary': module.collapse}"
               ng-model="module.collapse"
               uib-btn-checkbox
               ng-change="selectedChanged('collapse', module.collapse)">
                  Collapse
              </button>
              
            
              
              <button type="button" class="btn btn-default"
               style="width: 33%; border-radius: 0;"
               ng-class="{'btn-primary': module.accordion}"
               ng-model="module.accordion"
               uib-btn-checkbox
               ng-change="selectedChanged('accordion', module.accordion)">
                  Accordion
              </button>
              
            
              
              <button type="button" class="btn btn-default"
               style="width: 33%; border-radius: 0;"
               ng-class="{'btn-primary': module.alert}"
               ng-model="module.alert"
               uib-btn-checkbox
               ng-change="selectedChanged('alert', module.alert)">
                  Alert
              </button>
              
                </div>
              
            
              
                <div class="btn-group" style="width: 100%;">
              
              <button type="button" class="btn btn-default"
               style="width: 33%; border-radius: 0;"
               ng-class="{'btn-primary': module.buttons}"
               ng-model="module.buttons"
               uib-btn-checkbox
               ng-change="selectedChanged('buttons', module.buttons)">
                  Buttons
              </button>
              
            
              
              <button type="button" class="btn btn-default"
               style="width: 33%; border-radius: 0;"
               ng-class="{'btn-primary': module.carousel}"
               ng-model="module.carousel"
               uib-btn-checkbox
               ng-change="selectedChanged('carousel', module.carousel)">
                  Carousel
              </button>
              
            
              
              <button type="button" class="btn btn-default"
               style="width: 33%; border-radius: 0;"
               ng-class="{'btn-primary': module.dateparser}"
               ng-model="module.dateparser"
               uib-btn-checkbox
               ng-change="selectedChanged('dateparser', module.dateparser)">
                  Dateparser
              </button>
              
                </div>
              
            
              
                <div class="btn-group" style="width: 100%;">
              
              <button type="button" class="btn btn-default"
               style="width: 33%; border-radius: 0;"
               ng-class="{'btn-primary': module.isClass}"
               ng-model="module.isClass"
               uib-btn-checkbox
               ng-change="selectedChanged('isClass', module.isClass)">
                  Is Class
              </button>
              
            
              
              <button type="button" class="btn btn-default"
               style="width: 33%; border-radius: 0;"
               ng-class="{'btn-primary': module.position}"
               ng-model="module.position"
               uib-btn-checkbox
               ng-change="selectedChanged('position', module.position)">
                  Position
              </button>
              
            
              
              <button type="button" class="btn btn-default"
               style="width: 33%; border-radius: 0;"
               ng-class="{'btn-primary': module.datepicker}"
               ng-model="module.datepicker"
               uib-btn-checkbox
               ng-change="selectedChanged('datepicker', module.datepicker)">
                  Datepicker
              </button>
              
                </div>
              
            
              
                <div class="btn-group" style="width: 100%;">
              
              <button type="button" class="btn btn-default"
               style="width: 33%; border-radius: 0;"
               ng-class="{'btn-primary': module.debounce}"
               ng-model="module.debounce"
               uib-btn-checkbox
               ng-change="selectedChanged('debounce', module.debounce)">
                  Debounce
              </button>
              
            
              
              <button type="button" class="btn btn-default"
               style="width: 33%; border-radius: 0;"
               ng-class="{'btn-primary': module.dropdown}"
               ng-model="module.dropdown"
               uib-btn-checkbox
               ng-change="selectedChanged('dropdown', module.dropdown)">
                  Dropdown
              </button>
              
            
              
              <button type="button" class="btn btn-default"
               style="width: 33%; border-radius: 0;"
               ng-class="{'btn-primary': module.stackedMap}"
               ng-model="module.stackedMap"
               uib-btn-checkbox
               ng-change="selectedChanged('stackedMap', module.stackedMap)">
                  Stacked Map
              </button>
              
                </div>
              
            
              
                <div class="btn-group" style="width: 100%;">
              
              <button type="button" class="btn btn-default"
               style="width: 33%; border-radius: 0;"
               ng-class="{'btn-primary': module.modal}"
               ng-model="module.modal"
               uib-btn-checkbox
               ng-change="selectedChanged('modal', module.modal)">
                  Modal
              </button>
              
            
              
              <button type="button" class="btn btn-default"
               style="width: 33%; border-radius: 0;"
               ng-class="{'btn-primary': module.paging}"
               ng-model="module.paging"
               uib-btn-checkbox
               ng-change="selectedChanged('paging', module.paging)">
                  Paging
              </button>
              
            
              
              <button type="button" class="btn btn-default"
               style="width: 33%; border-radius: 0;"
               ng-class="{'btn-primary': module.pager}"
               ng-model="module.pager"
               uib-btn-checkbox
               ng-change="selectedChanged('pager', module.pager)">
                  Pager
              </button>
              
                </div>
              
            
              
                <div class="btn-group" style="width: 100%;">
              
              <button type="button" class="btn btn-default"
               style="width: 33%; border-radius: 0;"
               ng-class="{'btn-primary': module.pagination}"
               ng-model="module.pagination"
               uib-btn-checkbox
               ng-change="selectedChanged('pagination', module.pagination)">
                  Pagination
              </button>
              
            
              
              <button type="button" class="btn btn-default"
               style="width: 33%; border-radius: 0;"
               ng-class="{'btn-primary': module.tooltip}"
               ng-model="module.tooltip"
               uib-btn-checkbox
               ng-change="selectedChanged('tooltip', module.tooltip)">
                  Tooltip
              </button>
              
            
              
              <button type="button" class="btn btn-default"
               style="width: 33%; border-radius: 0;"
               ng-class="{'btn-primary': module.popover}"
               ng-model="module.popover"
               uib-btn-checkbox
               ng-change="selectedChanged('popover', module.popover)">
                  Popover
              </button>
              
                </div>
              
            
              
                <div class="btn-group" style="width: 100%;">
              
              <button type="button" class="btn btn-default"
               style="width: 33%; border-radius: 0;"
               ng-class="{'btn-primary': module.progressbar}"
               ng-model="module.progressbar"
               uib-btn-checkbox
               ng-change="selectedChanged('progressbar', module.progressbar)">
                  Progressbar
              </button>
              
            
              
              <button type="button" class="btn btn-default"
               style="width: 33%; border-radius: 0;"
               ng-class="{'btn-primary': module.rating}"
               ng-model="module.rating"
               uib-btn-checkbox
               ng-change="selectedChanged('rating', module.rating)">
                  Rating
              </button>
              
            
              
              <button type="button" class="btn btn-default"
               style="width: 33%; border-radius: 0;"
               ng-class="{'btn-primary': module.tabs}"
               ng-model="module.tabs"
               uib-btn-checkbox
               ng-change="selectedChanged('tabs', module.tabs)">
                  Tabs
              </button>
              
                </div>
              
            
              
                <div class="btn-group" style="width: 100%;">
              
              <button type="button" class="btn btn-default"
               style="width: 33%; border-radius: 0;"
               ng-class="{'btn-primary': module.timepicker}"
               ng-model="module.timepicker"
               uib-btn-checkbox
               ng-change="selectedChanged('timepicker', module.timepicker)">
                  Timepicker
              </button>
              
            
              
              <button type="button" class="btn btn-default"
               style="width: 33%; border-radius: 0;"
               ng-class="{'btn-primary': module.typeahead}"
               ng-model="module.typeahead"
               uib-btn-checkbox
               ng-change="selectedChanged('typeahead', module.typeahead)">
                  Typeahead
              </button>
              
            
        </div>
    </div>
    <div class="modal-footer">
        <a class="btn btn-default" ng-click="cancel()">Close</a>
        <a class="btn btn-primary" ng-hide="isOldBrowser()"
            ng-disabled="isOldBrowser() !== false && !selectedModules.length"
            ng-click="selectedModules.length && build(selectedModules, '1.2.5')">
            <i class="glyphicon glyphicon-download-alt"></i> Download {{selectedModules.length}} Modules
        </a>
    </div>
</script>

<script type="text/javascript">

    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-37467169-1']);
    _gaq.push(['_trackPageview']);

    (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();

</script>
<script src="assets/smoothscroll-angular-custom.js"></script>
<script src="assets/uglifyjs.js"></script>


</body></html>